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

[namnm]

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.

• [x] 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)

1.
2.
3.
4.

Context

Your Environment

| Tech | Version |
|---------|---------|
| next | |
| node | |
| OS | |
| browser | |
| etc | |

[timneutkens]

I'm sure curious to see a working example 😄

[namnm]

@timneutkens I have been looking around in next.js source code, and found out that the webpack config, which next uses, is not exposed out.
But I need that config to do a compiling session first, so it's not possible here.

I wonder if we can expose the webpack config to out API or there's a way to get it before next does compiling?

[timneutkens]

https://github.com/zeit/next.js#customizing-webpack-config it is exposed :)

[namnm]

@timneutkens Thank you, I come up with a way that we can get the webpack config asynchronously. However I dont think this helps much, since the config is only exposed when next starts bundling, but we need to hook the extensions really soon before any of modules has been loaded.

Do we have another way to get the webpack config synchronously before any modules has been loaded?

[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

[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"