<p dir="auto"><code class="notranslate">babel@7.0.0-beta.46</code> uses <code class="notranslate">babel.config.js</code> for global config. See <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="295683068" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/7358" data-hovercard-type="pull_request" data-hovercard-url="/babel/babel/pull/7358/hovercard" href="https://github.com/babel/babel/pull/7358">babel/babel#7358</a>.</p>
<p dir="auto"><code class="notranslate">next@6.0.0</code> uses <code class="notranslate">.babelrc</code>.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&gt; Using external babel configuration
&gt; Location: &quot;/app/.babelrc&quot;"><pre class="notranslate"><code class="notranslate">&gt; Using external babel configuration
&gt; Location: "/app/.babelrc"
</code></pre></div>
<p dir="auto">I assume this is because <code class="notranslate">next@6.0.0</code> uses <code class="notranslate">babel@7.0.0-beta.42</code> and not the latest yet.</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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">I'm talking about <a href="https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-postcss">this</a>.</p>
<p dir="auto">To reproduce just follow the steps on the readme. When running <code class="notranslate">npm run dev</code> you'll get an error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" ERROR  Failed to compile with 1 errors

 error  in ./pages?entry

Module build failed: TypeError: unknown: Duplicate declaration &quot;_JSXStyle&quot;
  1 | import _JSXStyle from 'styled-jsx/style';
  2 | import React from 'react';
&gt; 3 | import _JSXStyle from 'styled-jsx/style';
    |        ^
  4 | export default (function () {
  5 |   return React.createElement(
  6 |     'div',
    at File.buildCodeFrameError (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-core/lib/transformation/file/index.js:431:15)
    at Scope.checkBlockScopedCollisions (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/scope/index.js:398:27)
    at Scope.registerBinding (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/scope/index.js:592:16)
    at Scope.registerDeclaration (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/scope/index.js:516:14)
    at Object.Declaration (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/scope/index.js:176:36)
    at NodePath._call (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/context.js:103:17)

 @ multi ./~/next/dist/client/webpack-hot-middleware-client ./pages?entry

&gt; Ready on http://localhost:3000
"><pre class="notranslate"><code class="notranslate"> ERROR  Failed to compile with 1 errors

 error  in ./pages?entry

Module build failed: TypeError: unknown: Duplicate declaration "_JSXStyle"
  1 | import _JSXStyle from 'styled-jsx/style';
  2 | import React from 'react';
&gt; 3 | import _JSXStyle from 'styled-jsx/style';
    |        ^
  4 | export default (function () {
  5 |   return React.createElement(
  6 |     'div',
    at File.buildCodeFrameError (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-core/lib/transformation/file/index.js:431:15)
    at Scope.checkBlockScopedCollisions (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/scope/index.js:398:27)
    at Scope.registerBinding (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/scope/index.js:592:16)
    at Scope.registerDeclaration (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/scope/index.js:516:14)
    at Object.Declaration (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/scope/index.js:176:36)
    at NodePath._call (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/Users/Joonas/test/with-styled-jsx-postcss/node_modules/babel-traverse/lib/context.js:103:17)

 @ multi ./~/next/dist/client/webpack-hot-middleware-client ./pages?entry

&gt; Ready on http://localhost:3000

</code></pre></div>
<p dir="auto">Everything works well with <code class="notranslate">beta.20</code> but after that nope.</p>