<p dir="auto">I can't get my app to work after switching to 6.0.0-canary.4.  It is complaining that it can't import App or Container in my _app.js file.</p>
<p dir="auto">The error I get says:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
    in Container (at _app.js:18)
    in App
{ TypeError: Cannot read property 'toLowerCase' of undefined"><pre class="notranslate"><code class="notranslate">Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
    in Container (at _app.js:18)
    in App
{ TypeError: Cannot read property 'toLowerCase' of undefined
</code></pre></div>



<ul dir="auto">
<li>[ x] 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">I'm trying to override _app.js to create a persisting layout. Although, even without a _app.js file in my pages directory, I still get a similar error.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">I get the error mentioned above follow by a sequence of <code class="notranslate">TypeError: Cannot read property 'toLowerCase' of undefined</code> errors, which I believe is a result of the first error related to importing something wrong.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Upgrade from next 5.1.0</li>
<li>Run the app - <code class="notranslate">yarn dev</code> or <code class="notranslate">yarn build</code> and <code class="notranslate">yarn start</code></li>
<li>Get the error</li>
<li>I get the same error even if I don't try to override _app.js, but my _app.js file is currently just boilerplate from the example</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react'
import App, {Container} from 'next/app'

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

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return {pageProps}
  }

  render () {
    const {Component, pageProps} = this.props
    return (
      &lt;Container&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/Container&gt;
    );
  }
}

export default MyApp"><pre class="notranslate"><code class="notranslate">import React from 'react'
import App, {Container} from 'next/app'

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

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return {pageProps}
  }

  render () {
    const {Component, pageProps} = this.props
    return (
      &lt;Container&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/Container&gt;
    );
  }
}

export default MyApp
</code></pre></div>
<h2 dir="auto">Context</h2>


<p dir="auto">I'm excited about the new features released in 6.0.0-canary.4. Especially the idea of persisting layout.</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>6.0.0-canary.4</td>
</tr>
<tr>
<td>node</td>
<td>v8.1.3</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.13.4</td>
</tr>
<tr>
<td>browser</td>
<td>chrome 65</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<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">Dynamically importing a named export should work like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const DynamicFoo = dynamic(import('../components/Foo').then(m =&gt; m.Foo));"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">DynamicFoo</span> <span class="pl-c1">=</span> <span class="pl-en">dynamic</span><span class="pl-kos">(</span><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'../components/Foo'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">m</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">m</span><span class="pl-kos">.</span><span class="pl-c1">Foo</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Additionally, default exports need also to be explicitly imported when following the spec – something that TypeScript needs you to do, otherwise you'll get an error.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Accessing m.default explicitly is mandatory when using TypeScript
const DynamicFoo = dynamic(import('../components/Foo').then(m =&gt; m.default));"><pre class="notranslate"><span class="pl-c">// Accessing m.default explicitly is mandatory when using TypeScript</span>
<span class="pl-k">const</span> <span class="pl-v">DynamicFoo</span> <span class="pl-c1">=</span> <span class="pl-en">dynamic</span><span class="pl-kos">(</span><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'../components/Foo'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">m</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">m</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">When accessing a page with an import like above, I get the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Path must be a string. Received undefined
TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at join (path.js:1239:7)
    at loadChunks (/xyz/node_modules/next/dist/server/render.js:528:37)"><pre class="notranslate"><code class="notranslate">Path must be a string. Received undefined
TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at join (path.js:1239:7)
    at loadChunks (/xyz/node_modules/next/dist/server/render.js:528:37)
</code></pre></div>
<p dir="auto">(oddly, this doesn't happen when the named import is added to a hot-reloaded page)</p>
<h2 dir="auto">Context</h2>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="244421471" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2612" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/2612/hovercard" href="https://github.com/vercel/next.js/pull/2612">#2612</a> seems to be related to this issue</li>
<li>using <code class="notranslate">m.__webpackChunkName</code> looks suspicious because the chunk name turns out to be <code class="notranslate">undefined</code> triggering above error, e.g. <a href="https://github.com/zeit/next.js/blob/master/lib/dynamic.js#L69">https://github.com/zeit/next.js/blob/master/lib/dynamic.js#L69</a></li>
<li>next.js version: 3.2.2</li>
</ul>