Razzle: load css in node_modules fail on server in some cases

Did you manage to find a solution @ravikp7 ?

@Ekman No, haven't looked up in a while

I'm still trying to figure this one out.

We have migrated from CRA onto Razzle in two steps:

1. Migrate our CRA app as-is, no SSR and no extra fuzz. Make unit tests and e2e test green.
2. Enable SSR - this is the step we are on currently

I have problems loading a CSS file from an external library which in turn is referenced from an external library:

• Main project includes component x.js from library X
• Component x.js requires y.css from library Y. Library X does not bundle y.css, it just references it.

The main project compiles just fine after step 1. But when we try to enable SSR it explodes with this error:

> razzle start

 WAIT  Compiling...

Using .babelrc defined in your app root
Using .babelrc defined in your app root

√ Client
  Compiled successfully in 7.13s

√ Server
  Compiled successfully in 1.95s

(node:15016) UnhandledPromiseRejectionWarning: C:\main-project\node_modules\react-dates\lib\css\_datepicker.css:1
.PresetDateRangePicker_panel {
^

SyntaxError: Unexpected token '.'
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\main-project\node_modules\@company\libraryY\dist\cjs\index.js:29:1)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
(node:15016) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:15016) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

We've tried commenting out y.css in library X and included the file directly in the main project, it works. I just can't figure out where the problem is.

got same error. did anybody found solution?

If this is still a issue could someone make a simple example?

Did anybody find a solution?

We cannot reproduce this issue. Can you make a simple example or show us your exact procedure and config. If this is a problem for many people we very much want to fix it 😃

I'll try to create a repo and post here. I was migrating a (private) CRA app but then I faced this issue. It failed while trying to compile a package called modali, probably because that package imports a css file internally. I solved* it by removing config.externals in razzle.config.js following a suggestion from one of the issues.

@fivethreeo Hey, I created a small project that reproduces the bug. Take a look here: https://github.com/fa7ad/razzle-bug-test.

Steps to reproduce:

• Clone repo and install dependencies
• yarn start
• go to http://localhost:3000

The example uses razzle 3.1.0, there is a 3.1.2 now that might fix this issue.

Updated razzle to 3.1.3, still having the same issue 😞

PS. I update the repo as well, please check again

@fa7ad Found out why :) https://github.com/upmostly/modali/issues/34

@ravikp7 I think your issue might have been something we fixed recently.

I'm experiencing this issue as well. I made a bare-bones repo which illustrates this issue: https://github.com/christiannaths/razzle-css-example

node v12.18.3
razzle 3.1.6

This is the change that breaks server compilation (client seems to compile fine) https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

I've read through every issue I could find here that seemed related to this, and if I'm being honest, I'm not 100% sure if perhaps I'm missing something in regards to SSR webpack/react apps—perhaps this isn't actually supposed to work??

When I console.log the webpack config in a custom razzle.config.js file, I can see that the css-loaders for web and node are different, though I'm really not sure why they would be. I can't work out what the difference would be between importing a local css file and importing one from node_modules...

A clear answer to this issue would be massively appreciated 😕

Try reset-css/reset.css

Thanks for the quick reply. Yep, a bit of a lightbulb moment there, thank you for that.

Am I wrong in thinking that this is still not ideal though? Many packages don't expose this type of info in their readme, so I'd very much expect my example repo to work. Otherwise I have to dive into the source of each package and find out where they keep various CSS files that I need.

i.e.,

• node_modules/reset-css/rest.css
• node_modules/typeface-amiri/index.css
• etc

The packages in question both define their respective css files in their package.json.main entry, so I guess I would expect these imports (without pathing directly to the css files) to work.

I think main should be a path a cjs module. Style I am not sure about. So their index.js should have a reset.css require

Yeah, that makes sense. But honestly, I'm still confused. The examples I gave are _hardly_ the only packages that work this way; this kind of thing is found in the wild all over the place, and it all works by default in many other systems (next.js, create-react-app, react-static).

I think the heart of this issue isn't solved by workarounds or asking 3rd-party packages to make changes. There is a fundamental question that still remains.

1. Why does this work on client and not on server? (is this difference intentional?)

If you feel this is a candidate for change, I would be more than happy to work on it.

If you can find a solution I am all for it :)

Ok cool. Since you seem to hint that this is indeed undesired behaviour, will you consider you re-opening this issue so it can be tracked better (and help other people coming here understand that it's truly an issue)?

The issue is there is conventions for main fields, but are not always followed in the wild.

Look at nodeexternals I think :)

Cool, yeah, in my brief look at the webpack config it seemed like that was what's missing. I'll play with it a bit as soon as I can

I think node-externals is what is causing this since it only allows .css directly.

https://github.com/jaredpalmer/razzle/pull/1370

https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L512

fixed in dev

still getting error i am using razzle v3.3.13. what changes require in razzle.config.js file ?

√ Client
  Compiled successfully in 46.33s

√ Server
  Compiled successfully in 46.04s

G:\razzle-webapp\node_modules\react-images-upload\index.css:1
.fileUploader {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (G:\Webelight\adamsea-web-Fix-mansi-mar-10-add-razzle\node_modules\react-images-upload\compiled.js:17:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)

This happens because the package is exteralized server side. I will make a doc update to show how to fix this.

Fixed in razzle 3.4.2 and docs

https://razzlejs.org/getting-started#common-issues
https://razzle-git-canary-jared.vercel.app/getting-started#common-issues

@fivethreeo Thank you so much for quick response and solution u saved the day !!! works pretty well !!