<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">My import dependency tree looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="- main app
  - components library
    - antd"><pre class="notranslate"><code class="notranslate">- main app
  - components library
    - antd
</code></pre></div>
<p dir="auto">The components library is built with <code class="notranslate">next/babel</code>. When running a production build, I get the following error:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9904569/70392087-d2275700-1990-11ea-89d8-55c3da46a1f7.png"><img width="584" alt="Screen Shot 2019-12-08 at 8 00 22 AM" src="https://user-images.githubusercontent.com/9904569/70392087-d2275700-1990-11ea-89d8-55c3da46a1f7.png" style="max-width: 100%;"></a></p>
<p dir="auto">I used this as a reference to build my next config: <a href="https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less">https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less</a></p>
<p dir="auto">Everything works fine until I include the components repo (I can use antd in the main app without a problem). Any idea how to work around this issue?</p>
<p dir="auto">I imagine directly including the components library in the next config would work, but I'm not sure how exactly to do this with the next/babel preset.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<ol dir="auto">
<li>Clone <a href="https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less">https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less</a></li>
<li>Include any library that has a dependency on antd</li>
<li>Run next build</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The build works.</p>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">I'm trying to add wix-style-react plugin inside my NextJS project but I'm unable to build. Inside their <a href="https://github.com/wix/wix-style-react">documentation</a>, they say they use  Stylable, SASS and CSS Modules.</p>
<p dir="auto">When I install the plugin and build, I get the following error :</p>
<blockquote>
<p dir="auto">Module parse failed: Unexpected character '@' (1:0)<br>
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <a href="https://webpack.js.org/concepts#loaders" rel="nofollow">https://webpack.js.org/concepts#loaders</a><br>
<a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/import/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/import">@import</a> '../common';</p>
</blockquote>
<p dir="auto">I tried both following methods :</p>
<ol dir="auto">
<li>Using <a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-sass">next-sass</a> inside my <code class="notranslate">next.config.js</code></li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// next.config.js
const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true
})"><pre class="notranslate"><span class="pl-c">// next.config.js</span>
<span class="pl-k">const</span> <span class="pl-s1">withSass</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@zeit/next-sass'</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">withSass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">cssModules</span>: <span class="pl-c1">true</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">This way I got another error warning me about a .css file</p>
<blockquote>
<p dir="auto">Module parse failed: Unexpected token (1:0)<br>
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <a href="https://webpack.js.org/concepts#loaders" rel="nofollow">https://webpack.js.org/concepts#loaders</a><br>
.root {<br>
|   display: inline-block;<br>
|   text-overflow: ellipsis;</p>
</blockquote>
<ol start="2" dir="auto">
<li>Using <a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-css">next-css</a> in combination with <a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-sass">next-sass</a></li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// next.config.js
const withSass = require('@zeit/next-sass')
const withCss = require('@zeit/next-css')

module.exports = withCss(
  withSass({
    cssModules: true,
  })
)"><pre class="notranslate"><span class="pl-c">// next.config.js</span>
<span class="pl-k">const</span> <span class="pl-s1">withSass</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@zeit/next-sass'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">withCss</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@zeit/next-css'</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">withCss</span><span class="pl-kos">(</span>
  <span class="pl-s1">withSass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">cssModules</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span></pre></div>
<p dir="auto">With this config, I get again the same error as with no config</p>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li>Create a new blank project with <code class="notranslate">create-next-app</code></li>
<li>Install the module <code class="notranslate">yarn add wix-style-react</code></li>
<li>Build <code class="notranslate">yarn build</code></li>
</ol>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Version of Next.js: 9.1.4</li>
</ul>