Import CSS file from node modules throws exception on server side render

[Sebastian Fekete]

(function (exports, require, module, __filename, __dirname) { .class-name

SyntaxError: Unexpected token .

[Nikolay]

Then it doesn't on the client side too, possibly because your webpack configuration doesn't process node_modules with css-loader

[Sebastian Fekete]

It worked and works on client.
My css related webpack config are:

const extractStyle = new ExtractTextPlugin(mainOutputCssFile);

...
plugins.push(extractStyle);

     {
        test: new RegExp(escapeRegExp(mainScssFile) + '$'),
        loader: extractStyle.extract(['css-loader', 'sass-loader']),
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: [path.resolve(__dirname, 'src', 'scss', mainScssFile)],
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      },

[Sebastian Fekete]

I think I got it.
As default the node modules directory is marked as external on server build. So no loaders are used at all on server side for node modules only when you mark the package in the "exclude_from_externals" list. The problem is, I only want to load a package's css files (this is very common for prebuilt UI components) with a loader not the whole modules js.

[Nikolay]

Yes, currently you must exclude it from externals in order for it to be processed by Webpack loaders.
You can write a regular expression which will only match the files you need.
You can use regexpal.com