<p dir="auto">After upgrading to 4.1.0 from 4.0.2, I got this warning in my browser's console. It didn't occur on 4.0.2.</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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<ul dir="auto">
<li>No warning message.</li>
</ul>
<h2 dir="auto">Current Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="React Hot Loader: this component is not accepted by Hot Loader. 
Please check is it extracted as a top-level class, a function or a variable. 
Click below to reveal the source location: 
 ƒ (props, context, updater) {
      // This constructor gets overridden by mocks. The argument is used
      // by mocks to assert on what gets mounted.

      if (true) {
        warning(
          th…"><pre class="notranslate"><code class="notranslate">React Hot Loader: this component is not accepted by Hot Loader. 
Please check is it extracted as a top-level class, a function or a variable. 
Click below to reveal the source location: 
 ƒ (props, context, updater) {
      // This constructor gets overridden by mocks. The argument is used
      // by mocks to assert on what gets mounted.

      if (true) {
        warning(
          th…
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Install Next 4.1.0</li>
<li>Run dev server.</li>
<li>Warning messages in the browser's console.</li>
</ol>
<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.1.0</td>
</tr>
<tr>
<td>node</td>
<td>8.6.0</td>
</tr>
<tr>
<td>OS</td>
<td>Ubuntu</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 60</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">The <a href="https://github.com/zeit/next.js/tree/canary/examples/with-typings-for-css-modules"><code class="notranslate">with-typings-for-css-modules</code></a> example works only because <code class="notranslate">style.css</code> is in the root folder. If you move it into <code class="notranslate">pages</code>, the build fails:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ ./node_modules/.bin/next build
Creating an optimized production build

Failed to compile.

./pages/style.css.d.ts 1:20
Module parse failed: Unexpected token (1:20)
File was processed with these loaders:
 * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
&gt; export const example;
| export const example__description;
| export const exampleDescription;

&gt; Build error occurred
Error: &gt; Build failed because of webpack errors
    at build (/Users/alex/Code/next.js/examples/with-typings-for-css-modules/node_modules/next/dist/build/index.js:7:847)"><pre class="notranslate"><code class="notranslate">$ ./node_modules/.bin/next build
Creating an optimized production build

Failed to compile.

./pages/style.css.d.ts 1:20
Module parse failed: Unexpected token (1:20)
File was processed with these loaders:
 * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
&gt; export const example;
| export const example__description;
| export const exampleDescription;

&gt; Build error occurred
Error: &gt; Build failed because of webpack errors
    at build (/Users/alex/Code/next.js/examples/with-typings-for-css-modules/node_modules/next/dist/build/index.js:7:847)
</code></pre></div>
<p dir="auto">Testing this, it appears to <em>only</em> affect pages. If a page embeds a component in a subfolder that imports styles from its own folder, it works fine.</p>
<p dir="auto">The issue is mentioned in <a href="https://spectrum.chat/next-js/general/9-0-typescript-loader-error~50d76a53-3039-40b1-be42-8ee06da7dad0" rel="nofollow">this Spectrum discussion</a>.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I have <a href="https://github.com/atombender/next.js-issue-with-typings-for-css-modules">cloned the example to this repo</a>.</p>
<ol dir="auto">
<li><code class="notranslate">git clone https://github.com/atombender/next.js-issue-with-typings-for-css-modules</code></li>
<li><code class="notranslate">cd next.js-issue-with-typings-for-css-modules</code></li>
<li><code class="notranslate">yarn run build</code></li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">It should be possible to import styles with TypeScript from a page.</p>