[SSR] A solution for CSS-file-based styling and importing non-js files from webpack

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 babel-register. I just want to share it to improve other devs experience with SSR: https://github.com/namnm/webpack-register

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. Hope this can help somewhere.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

We can easily require non-js files from webpack bundle, like sass .scss, image .png .jpg, … in our server rendering code.

Current Behavior

Right now, we are not recommended to use CSS-file-based styling and importing non-js from webpack in SSR, due to a bunch of practical issues…

Steps to Reproduce (for bugs)

Context

Your Environment

Tech	Version
next
node
OS
browser
etc

[anandmani]

“Right now, we are not recommended to use CSS-file-based styling and importing non-js from webpack in SSR, due to a bunch of practical issues…”

It would be helpful if you could list down a couple of these “practical issues”

[namnm]

@timneutkens Another thing, is that when we do production serving, next doesnt do any webpack stuff, and it doesnt require the next.config.js file too. So in this case, the asynchronous function to get the webpack config which I mentioned above, doesnt work too.

I think we need to export a file webpack.config.js in our next API