<p dir="auto">I'm stuck on an odd error during build, where a certain source file is unable to be transpiled. The file in question just exports a named class: <code class="notranslate">export class ..</code>.</p>
<p dir="auto">The issue seems to be caused by <code class="notranslate">styled-jsx</code> and its moduleExportsVisitor. The file where the error occurs does not use React or styled-jsx.</p>
<p dir="auto">Any advice/help would be appreciated. For now, I'm working around it by creating a separate build  for that module without going through the Next build pipeline. Here's the stack trace:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Module build failed: TypeError: ~/dev/mooz/vex/src/accidental.js: Cannot read property 'file' of undefined
    at NodePath.getSource (~/dev/node_modules/babel-traverse/lib/path/introspection.js:193:20)
    at moduleExportsVisitor (~/dev/node_modules/styled-jsx/dist/babel-external.js:171:24)
    at callExternalVisitor (~/dev/node_modules/styled-jsx/dist/babel.js:346:3)
    at PluginPass.AssignmentExpression (~/dev/node_modules/styled-jsx/dist/babel.js:308:9)
    at newFn (~/dev/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (~/dev/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (~/dev/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (~/dev/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (~/dev/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (~/dev/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (~/dev/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (~/dev/node_modules/babel-traverse/lib/index.js:114:17)"><pre class="notranslate"><code class="notranslate">Module build failed: TypeError: ~/dev/mooz/vex/src/accidental.js: Cannot read property 'file' of undefined
    at NodePath.getSource (~/dev/node_modules/babel-traverse/lib/path/introspection.js:193:20)
    at moduleExportsVisitor (~/dev/node_modules/styled-jsx/dist/babel-external.js:171:24)
    at callExternalVisitor (~/dev/node_modules/styled-jsx/dist/babel.js:346:3)
    at PluginPass.AssignmentExpression (~/dev/node_modules/styled-jsx/dist/babel.js:308:9)
    at newFn (~/dev/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (~/dev/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (~/dev/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (~/dev/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (~/dev/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (~/dev/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (~/dev/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (~/dev/node_modules/babel-traverse/lib/index.js:114:17)
</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">The build task completes successfully.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">The build task fails with an error mentioned in summary.</p>
<h2 dir="auto">Steps to Reproduce</h2>


<p dir="auto">Unknown</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><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/beta/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/beta">@beta</a></td>
</tr>
</tbody>
</table>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">All the components of the current app I am working on will be loaded as npm modules. This means that about 30 components will be worked on at the same time. Therefore it is critical for me to be able to link them locally while I am developing on them. I have not been able to get the packages to load with next without using a custom next.config.js.</p>
<h3 dir="auto">This is the error I get:</h3>
<p dir="auto">Module parse failed: Unexpected token (15:12) You may need an appropriate loader to handle this file type.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I have managed to get it to work by using require.resolve() on all loaders in the webpack config.</p>
<h3 dir="auto">This is the next.config.js I am using (running on: 6.0.4-canary.8):</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const withTypescript = require('@zeit/next-typescript');

function resolveLoader(loader) {
    try {
        loader = require.resolve(__dirname + '/node_modules/next/dist/server/build/loaders/' + loader);
    } catch(error) {
        try {
            loader = require.resolve(loader);
        } catch(error) {
            //Ignore error
        }
    }
    return loader;
}

module.exports = withTypescript({
    webpack(config, options) {
        for (const rule of config.module.rules) {
            rule.exclude = /node_modules\/(?!(@my-scope)\/).*/;
            delete rule.include;
            rule.loader = resolveLoader(rule.loader);
            if(Array.isArray(rule.use)) {
	        rule.use[0] = resolveLoader(rule.use[0]);
            } else if(typeof rule.use === 'object' &amp;&amp; rule.use.loader) {
	        rule.use.loader = resolveLoader(rule.use.loader);
            }
        }

        return config;
    }
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">withTypescript</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@zeit/next-typescript'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">resolveLoader</span><span class="pl-kos">(</span><span class="pl-s1">loader</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">try</span> <span class="pl-kos">{</span>
        <span class="pl-s1">loader</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/node_modules/next/dist/server/build/loaders/'</span> <span class="pl-c1">+</span> <span class="pl-s1">loader</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span> <span class="pl-k">catch</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">try</span> <span class="pl-kos">{</span>
            <span class="pl-s1">loader</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">loader</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span> <span class="pl-k">catch</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-c">//Ignore error</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">return</span> <span class="pl-s1">loader</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">withTypescript</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-en">webpack</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-s1">options</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">const</span> <span class="pl-s1">rule</span> <span class="pl-k">of</span> <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">.</span><span class="pl-c1">rules</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">exclude</span> <span class="pl-c1">=</span> <span class="pl-pds"><span class="pl-c1">/</span>node_modules<span class="pl-cce">\/</span><span class="pl-kos">(?</span><span class="pl-c1">!</span><span class="pl-kos">(</span>@my-scope<span class="pl-kos">)</span><span class="pl-cce">\/</span><span class="pl-kos">)</span>.<span class="pl-c1">*</span><span class="pl-c1">/</span></span><span class="pl-kos">;</span>
            <span class="pl-k">delete</span> <span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">include</span><span class="pl-kos">;</span>
            <span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">loader</span> <span class="pl-c1">=</span> <span class="pl-en">resolveLoader</span><span class="pl-kos">(</span><span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">loader</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">isArray</span><span class="pl-kos">(</span><span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">use</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
	        <span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">use</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">resolveLoader</span><span class="pl-kos">(</span><span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">use</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">use</span> <span class="pl-c1">===</span> <span class="pl-s">'object'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">use</span><span class="pl-kos">.</span><span class="pl-c1">loader</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
	        <span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">use</span><span class="pl-kos">.</span><span class="pl-c1">loader</span> <span class="pl-c1">=</span> <span class="pl-en">resolveLoader</span><span class="pl-kos">(</span><span class="pl-s1">rule</span><span class="pl-kos">.</span><span class="pl-c1">use</span><span class="pl-kos">.</span><span class="pl-c1">loader</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span>
        <span class="pl-kos">}</span>

        <span class="pl-k">return</span> <span class="pl-s1">config</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Describe alternatives you've considered</h2>
<ol dir="auto">
<li>Make resolvement of loaders an option. Perhaps by providing a function like: withResolvedLoaders()</li>
<li>Make it permanent if this doesn't cause issues with other functionality like .babelrc</li>
<li>Inform people about the issue and provide with a solution for it in the documentation</li>
</ol>
<p dir="auto">I believe that option 1 would be the easiest alternative and least error prone.</p>
<h2 dir="auto">Additional context</h2>