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

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.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 2
  • Comments: 31

Most upvoted comments

fixed in dev

If you can find a solution I am all for it 😃

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

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

Look at nodeexternals I think 😃

Try reset-css/reset.css

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.

Did you manage to find a solution @ravikp7 ?