<p dir="auto">I have a package of reusable components that use styled-jsx that I import into my Next.js app (version 2.4.0).</p>
<p dir="auto">The styles of the components in the package do not get rendered on the server and results in a flash of unstyled content on page load.</p>
<p dir="auto">Is there an approach that's taken for cases like this?</p>
<p dir="auto">My only hack has been to import the styled-jsx files separately into my app and add the style to the render using <code class="notranslate">&lt;styled-jsx&gt;{style}&lt;/style&gt;</code> but that results in duplicate styles when the component's styles get attributed by the client.</p>
<p dir="auto">Any help would be greatly appreciated</p>
<p dir="auto">A solution for CSS-file-based styling and importing non-js files from webpack in server side rendering. I have made a package that allows us to import non-js files directly in server side code, without prebundling, and works just like <code class="notranslate">babel-register</code>. I just want to share it to improve other devs experience with SSR:<br>
<a href="https://github.com/namnm/webpack-register">https://github.com/namnm/webpack-register</a></p>
<p dir="auto">I also would like to create a PR and include a link in the section that warns users not to use webpack loaders to support for other non-js files.<br>
Hope this can help somewhere.</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>


<p dir="auto">We can easily require non-js files from webpack bundle, like sass .scss, image .png .jpg, ... in our server rendering code.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Right now, we are not recommended to use CSS-file-based styling and importing non-js from webpack in SSR, due to <strong>a bunch of practical issues</strong>...</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>


<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></td>
</tr>
<tr>
<td>node</td>
<td></td>
</tr>
<tr>
<td>OS</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>