<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">Imports like, import(<code class="notranslate">./widgets/${name}/index.js</code>) work</p>
<h2 dir="auto">Current Behavior</h2>


<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (http://localhost:3242/_next/1499784830986/manifest.js:698:30)
    at fn (http://localhost:3242/_next/1499784830986/manifest.js:117:20)
    at SameLoopPromise.ssr [as cb] (http://localhost:3242/_next/1499784830986/page/metaspace:296:38)
    at SameLoopPromise.runIfNeeded (http://localhost:3242/_next/1499784830986/commons.js:53634:12)
    at SameLoopPromise.then (http://localhost:3242/_next/1499784830986/commons.js:53564:12)
    at DynamicComponent.loadComponent (http://localhost:3242/_next/1499784830986/commons.js:53416:17)
    at DynamicComponent.load (http://localhost:3242/_next/1499784830986/commons.js:53406:16)
    at DynamicComponent.componentDidMount (http://localhost:3242/_next/1499784830986/commons.js:53484:16)
    at http://localhost:3242/_next/1499784830986/commons.js:32667:25
    at measureLifeCyclePerf (http://localhost:3242/_next/1499784830986/commons.js:32478:12)"><pre class="notranslate"><code class="notranslate">Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (http://localhost:3242/_next/1499784830986/manifest.js:698:30)
    at fn (http://localhost:3242/_next/1499784830986/manifest.js:117:20)
    at SameLoopPromise.ssr [as cb] (http://localhost:3242/_next/1499784830986/page/metaspace:296:38)
    at SameLoopPromise.runIfNeeded (http://localhost:3242/_next/1499784830986/commons.js:53634:12)
    at SameLoopPromise.then (http://localhost:3242/_next/1499784830986/commons.js:53564:12)
    at DynamicComponent.loadComponent (http://localhost:3242/_next/1499784830986/commons.js:53416:17)
    at DynamicComponent.load (http://localhost:3242/_next/1499784830986/commons.js:53406:16)
    at DynamicComponent.componentDidMount (http://localhost:3242/_next/1499784830986/commons.js:53484:16)
    at http://localhost:3242/_next/1499784830986/commons.js:32667:25
    at measureLifeCyclePerf (http://localhost:3242/_next/1499784830986/commons.js:32478:12)
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<p dir="auto">Use dynamic imports like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const loadModule = name =&gt; dynamic(import('./modules/' + name + '/index.js'))
...
const Component = loadModule('name');
() =&gt; &lt;Component /&gt;"><pre class="notranslate"><code class="notranslate">const loadModule = name =&gt; dynamic(import('./modules/' + name + '/index.js'))
...
const Component = loadModule('name');
() =&gt; &lt;Component /&gt;
</code></pre></div>
<h2 dir="auto">Context</h2>


<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>next@3.0.1-beta.13</td>
</tr>
<tr>
<td>node</td>
<td>v8.1.2</td>
</tr>
<tr>
<td>OS</td>
<td>linux</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
</tbody>
</table>
<p dir="auto">I'm having a small issue with using a custom location for the <code class="notranslate">pages</code> directory. It appears as though the babel-loader is no longer able to parse the components referenced in each page.</p>
<p dir="auto"><em>Any thoughts?</em> Or am I going to have to implement my own babel-loader in the <code class="notranslate">next.config.js</code>?<br>
<a href="https://github.com/stephencorwin/nextjs-hello-world">https://github.com/stephencorwin/nextjs-hello-world</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="├── /app
|  ├── /components
|  |  ├── /Footer
|  |  |  ├── Footer.js
|  |  |  ├── index.js
|  |  |  └── styles.js
|  |  ├── /Greeting
|  |  |  ├── Greeting.js
|  |  |  ├── index.js
|  |  |  └── styles.js
|  |  └── /Header
|  |     ├── Header.js
|  |     ├── index.js
|  |     └── styles.js
|  └── /templates
|     └── /Home
|        ├── Home.js
|        ├── index.js
|        └── styles.js
└── /server
   ├── index.js
   ├── /middleware
   |  └── index.js
   └── /pages
      ├── index.js
      └── _document.js"><pre class="notranslate"><code class="notranslate">├── /app
|  ├── /components
|  |  ├── /Footer
|  |  |  ├── Footer.js
|  |  |  ├── index.js
|  |  |  └── styles.js
|  |  ├── /Greeting
|  |  |  ├── Greeting.js
|  |  |  ├── index.js
|  |  |  └── styles.js
|  |  └── /Header
|  |     ├── Header.js
|  |     ├── index.js
|  |     └── styles.js
|  └── /templates
|     └── /Home
|        ├── Home.js
|        ├── index.js
|        └── styles.js
└── /server
   ├── index.js
   ├── /middleware
   |  └── index.js
   └── /pages
      ├── index.js
      └── _document.js
</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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Components imported from the <code class="notranslate">/apps/components/</code> folder should be parsed using the Next.js implementation of the babel-loader.</p>
<h2 dir="auto">Current Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="error  in ./app/components/Header/Header.js

Module parse failed: D:\stephencorwin\projects\nextjs-hello-world\node_modules\react-hot-loader\webpack.js!D:\stephencorwin\projects\nextjs-hello-world\app\components\Header\Header.js Unexpected token (1:34)

You may need an appropriate loader to handle this file type.
| export default ({ className }) =&gt; &lt;div className={className}&gt;Header&lt;/div&gt;;"><pre class="notranslate"><code class="notranslate">error  in ./app/components/Header/Header.js

Module parse failed: D:\stephencorwin\projects\nextjs-hello-world\node_modules\react-hot-loader\webpack.js!D:\stephencorwin\projects\nextjs-hello-world\app\components\Header\Header.js Unexpected token (1:34)

You may need an appropriate loader to handle this file type.
| export default ({ className }) =&gt; &lt;div className={className}&gt;Header&lt;/div&gt;;
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Clone Repository</li>
<li><code class="notranslate">npm -i</code></li>
<li><code class="notranslate">npm run dev</code></li>
</ol>
<h2 dir="auto">Context</h2>


<p dir="auto">Ideally, I would like to have the <code class="notranslate">pages</code> directory be segregated from the other components.</p>
<p dir="auto">It currently works if I colocated the <code class="notranslate">pages</code> directory next to the <code class="notranslate">templates</code> and <code class="notranslate">components</code> that are also being loaded. View the <strong>Pull Request</strong> below for details.</p>
<p dir="auto"><a href="https://github.com/stephencorwin/nextjs-hello-world/pull/1">https://github.com/stephencorwin/nextjs-hello-world/pull/1</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="├── /app
|  ├── /components
|  |  ├── /Footer
|  |  |  ├── Footer.js
|  |  |  ├── index.js
|  |  |  └── styles.js
|  |  ├── /Greeting
|  |  |  ├── Greeting.js
|  |  |  ├── index.js
|  |  |  └── styles.js
|  |  └── /Header
|  |     ├── Header.js
|  |     ├── index.js
|  |     └── styles.js
|  ├── /pages
|  |  ├── index.js
|  |  └── _document.js
|  └── /templates
|     └── /Home
|        ├── Home.js
|        ├── index.js
|        └── styles.js
└── /server
   ├── index.js
   └── /middleware
      └── index.js"><pre class="notranslate"><code class="notranslate">├── /app
|  ├── /components
|  |  ├── /Footer
|  |  |  ├── Footer.js
|  |  |  ├── index.js
|  |  |  └── styles.js
|  |  ├── /Greeting
|  |  |  ├── Greeting.js
|  |  |  ├── index.js
|  |  |  └── styles.js
|  |  └── /Header
|  |     ├── Header.js
|  |     ├── index.js
|  |     └── styles.js
|  ├── /pages
|  |  ├── index.js
|  |  └── _document.js
|  └── /templates
|     └── /Home
|        ├── Home.js
|        ├── index.js
|        └── styles.js
└── /server
   ├── index.js
   └── /middleware
      └── index.js
</code></pre></div>
<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>4.2.3</td>
</tr>
<tr>
<td>node</td>
<td>8.7.0</td>
</tr>
<tr>
<td>OS</td>
<td>Windows 10</td>
</tr>
</tbody>
</table>