<p dir="auto">I've created the <code class="notranslate">_app.js</code> file exactly as the example in the documentation, and tried to build it, but i got a big error.</p>
<p dir="auto">This is my _app.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import App, { Container } from &quot;next/app&quot;;
import React from &quot;react&quot;;
import { CSSTransition, TransitionGroup } from &quot;react-transition-group&quot;;
import Layout from &quot;../components/App&quot;;

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    console.log(ctx, &quot;rendering!&quot;);

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      &lt;Container&gt;
        &lt;Layout&gt;
          &lt;TransitionGroup&gt;
            &lt;CSSTransition
              key={this.props.router.route}
              classNames=&quot;fade&quot;
              timeout={2000}&gt;
              &lt;Component {...pageProps} /&gt;
            &lt;/CSSTransition&gt;
          &lt;/TransitionGroup&gt;
        &lt;/Layout&gt;
        &lt;style jsx global&gt;{`...`}&lt;/style&gt;
      &lt;/Container&gt;
    );
  }
}"><pre class="notranslate"><code class="notranslate">import App, { Container } from "next/app";
import React from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import Layout from "../components/App";

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    console.log(ctx, "rendering!");

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      &lt;Container&gt;
        &lt;Layout&gt;
          &lt;TransitionGroup&gt;
            &lt;CSSTransition
              key={this.props.router.route}
              classNames="fade"
              timeout={2000}&gt;
              &lt;Component {...pageProps} /&gt;
            &lt;/CSSTransition&gt;
          &lt;/TransitionGroup&gt;
        &lt;/Layout&gt;
        &lt;style jsx global&gt;{`...`}&lt;/style&gt;
      &lt;/Container&gt;
    );
  }
}
</code></pre></div>




<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Project built up to run <code class="notranslate">yarn start</code></p>

<h2 dir="auto">Current Behavior</h2>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="yarn run v1.5.1
$ next build
&gt; Using external babel configuration
&gt; Location: &quot;/Users/facundogordillo/OneDrive/clinical-web-next/.babelrc&quot;
&gt; Failed to build
{ Error: (client) ./pages/_app.js
Module not found: Error: Can't resolve 'next/app' in '/Users/facundogordillo/OneDrive/clinical-web-next/pages'
resolve 'next/app' in '/Users/facundogordillo/OneDrive/clinical-web-next/pages'
  Parsed request is a module
  using description file: /Users/facundogordillo/OneDrive/clinical-web-next/package.json (relative path: ./pages)
    aliased with mapping 'next': '/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next' to '/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app'
      using description file: /Users/facundogordillo/OneDrive/clinical-web-next/package.json (relative path: ./pages)
        Field 'browser' doesn't contain a valid alias configuration
      after using description file: /Users/facundogordillo/OneDrive/clinical-web-next/package.json (relative path: ./pages)
        using description file: /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/package.json (relative path: ./app)
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.js doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.jsx doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.json doesn't exist
          as directory
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app doesn't exist
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app]
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.js]
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.jsx]
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.json]
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app]"><pre class="notranslate"><code class="notranslate">yarn run v1.5.1
$ next build
&gt; Using external babel configuration
&gt; Location: "/Users/facundogordillo/OneDrive/clinical-web-next/.babelrc"
&gt; Failed to build
{ Error: (client) ./pages/_app.js
Module not found: Error: Can't resolve 'next/app' in '/Users/facundogordillo/OneDrive/clinical-web-next/pages'
resolve 'next/app' in '/Users/facundogordillo/OneDrive/clinical-web-next/pages'
  Parsed request is a module
  using description file: /Users/facundogordillo/OneDrive/clinical-web-next/package.json (relative path: ./pages)
    aliased with mapping 'next': '/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next' to '/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app'
      using description file: /Users/facundogordillo/OneDrive/clinical-web-next/package.json (relative path: ./pages)
        Field 'browser' doesn't contain a valid alias configuration
      after using description file: /Users/facundogordillo/OneDrive/clinical-web-next/package.json (relative path: ./pages)
        using description file: /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/package.json (relative path: ./app)
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.js doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.jsx doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.json doesn't exist
          as directory
            /Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app doesn't exist
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app]
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.js]
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.jsx]
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app.json]
[/Users/facundogordillo/OneDrive/clinical-web-next/node_modules/next/app]
</code></pre></div>

<h2 dir="auto">Context</h2>
<p dir="auto">.babelrc</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [&quot;next/babel&quot;],
  &quot;plugins&quot;: [&quot;import-static-files&quot;]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": ["next/babel"],
  "plugins": ["import-static-files"]
}
</code></pre></div>
<p dir="auto">I don't have a next.config.js file.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>5.1.0</td>
</tr>
<tr>
<td>node</td>
<td>9.11.1</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS High Sierra</td>
</tr>
<tr>
<td>browser</td>
<td>Firefox Developer Edition</td>
</tr>
</tbody>
</table>
<p dir="auto">I'm trying to integrate Flow with my current next project I notice there is a issue with<br>
getInitialProps method. Flow complains:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1383250/33230671-198946dc-d1e8-11e7-8732-afaf163fbcbb.png"><img width="579" alt="screen shot 2017-11-25 at 13 49 09" src="https://user-images.githubusercontent.com/1383250/33230671-198946dc-d1e8-11e7-8732-afaf163fbcbb.png" style="max-width: 100%;"></a></p>
<p dir="auto">I'm a little bit confused do I have to specify<br>
<code class="notranslate">static getInitialProps: (ctx: {pathname: string, query: any, req?: any, res?: any, jsonPageRes?: any, err?: any}) =&gt; Promise&lt;any&gt;; </code><br>
for every page or it could be done with next.js.flow file?<br>
I see there is definition within the file</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="declare module &quot;next/document&quot; {
  declare export var Head: Class&lt;React$Component&lt;any, any&gt;&gt;;
  declare export var Main: Class&lt;React$Component&lt;any, any&gt;&gt;;
  declare export var NextScript: Class&lt;React$Component&lt;any, any&gt;&gt;;
  declare export default Class&lt;React$Component&lt;any, any&gt;&gt; &amp; {
    getInitialProps: (ctx: {pathname: string, query: any, req?: any, res?: any, jsonPageRes?: any, err?: any}) =&gt; Promise&lt;any&gt;;
    renderPage(cb: Function): void;
  };
}"><pre class="notranslate"><code class="notranslate">declare module "next/document" {
  declare export var Head: Class&lt;React$Component&lt;any, any&gt;&gt;;
  declare export var Main: Class&lt;React$Component&lt;any, any&gt;&gt;;
  declare export var NextScript: Class&lt;React$Component&lt;any, any&gt;&gt;;
  declare export default Class&lt;React$Component&lt;any, any&gt;&gt; &amp; {
    getInitialProps: (ctx: {pathname: string, query: any, req?: any, res?: any, jsonPageRes?: any, err?: any}) =&gt; Promise&lt;any&gt;;
    renderPage(cb: Function): void;
  };
}
</code></pre></div>
<p dir="auto">But it seems this definition already have some problems. Please note I tried with flow-bin version specified in the example, but I also tried with newest flow-bin and it seems the same.</p>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I think this has to work automatically if it's well defined within the next.js.flow file</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Take with-flow example</li>
<li>Change index.js page to be statefull component and add getInitialProps to it</li>
<li>run yarn flow</li>
</ol>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>latest</td>
</tr>
<tr>
<td>node</td>
<td>8.7.0</td>
</tr>
<tr>
<td>OS</td>
<td>OSX</td>
</tr>
</tbody>
</table>