load css in node_modules fail on server in some cases

[ravikp7]

I've setup a create-razzzle-app and added this npm module for linkedin login

This npm module has css and img imports which is throwing an error, logs

√ Client
  Compiled successfully in 3.39s

√ Server
  Compiled successfully in 420.40ms

C:\scoot-webapp\node_modules\react-linkedin-login-oauth2\assets\index.css:1
.btn-linkedin {
^

SyntaxError: Unexpected token .
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\scoot-webapp\node_modules\react-linkedin-login-oauth2\lib\LinkedIn.js:14:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)

The dev server was running while this module was installed. I added it and used it. It seemed to work fine after hot reload.
But the problem arose after I restarted the server, now it's not able to resolve the css and img requires from that module.

It'd be really helpful if someone can guide me on how to fix this issue by extending the webpack config or babel config.

The problem I can think of is that it's not using postcss-loader for node by looking at the razzle/config/createConfig.js for css rules. But not sure, if it's the real cause or how to fix it.

[Ekman]

Did you manage to find a solution @ravikp7 ?

[ravikp7]

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

[Ekman]

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.

[v0lume]

got same error. did anybody found solution?

[fivethreeo]

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

[fa7ad]

Did anybody find a solution?

[fivethreeo]

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 😃

[fa7ad]

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.

[fa7ad]

@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

[fivethreeo]

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