<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">NextJs does not recognise files like <code class="notranslate">pages/index.mjs</code>.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I'd like to be able to use <code class="notranslate">.mjs</code> files in place of <code class="notranslate">.js</code> files across my entire project.</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">N/A.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">It'd be great to see this land sometime soon. As Node 11 moves forward, I'd like to see a future where we don't need to use Babel for module support, and can rely directly on Node.</p>
<p dir="auto">I am more than happy to work on a PR for this, if someone can point me in the right direction. I'm not 100% sure of the implications here, but hopefully it's rather simple. We'll likely need to do detection of Node versioning.</p>
<p dir="auto">I currently have my project setup with Emotion but have tried Sass modules as well. It compiles styles in the <a href="https://github.com/fandy/community/blob/master/pages/index.tsx#L19"><code class="notranslate">pages</code></a> dir, but not <a href="https://github.com/fandy/community/blob/master/components/Header/Header.tsx#L7">elsewhere</a>. Is this a Next.js issue, or is there something wrong with the way I set it up? When I tried with Sass modules I encountered the same problem, where the styles would exist if the component was in <code class="notranslate">pages</code> but not in another root dir.</p>
<h3 dir="auto">Styles exist in <a href="https://github.com/fandy/community/blob/master/pages/index.tsx#L19"><code class="notranslate">pages</code></a></h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19108762/37267795-dcc15000-2598-11e8-99b2-1c01d4c81f18.png"><img src="https://user-images.githubusercontent.com/19108762/37267795-dcc15000-2598-11e8-99b2-1c01d4c81f18.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">Styles do not exist in <a href="https://github.com/fandy/community/blob/master/components/Header/Header.tsx#L7"><code class="notranslate">components</code></a></h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19108762/37267803-e48f1c86-2598-11e8-853e-05817297ab76.png"><img src="https://user-images.githubusercontent.com/19108762/37267803-e48f1c86-2598-11e8-853e-05817297ab76.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">The weird thing is, the className is there but just not the styles for it.</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>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Has styles in the Header className</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Header className is being referenced but contains no styles. However, the styles in pages does.</p>