Unexpected token when trying to load css with webpack and babel

I had to remove from:

{  test: /\.css$/,  use: [         { loader: 'style-loader' },         { loader: 'css-loader' }       ],       include: [                    path.resolve(__dirname, "src","client")       ],}

to:

 {      test: /\.css$/,      use: [             { loader: 'style-loader' },             { loader: 'css-loader' }           ],    }

This one works in my case. I don´t know why.

To create npm package, you can build like to:

module: {    rules: [      {        test: /\.js$/,        include: path.resolve(__dirname, 'src'),        exclude: /(node_modules|bower_components|build)/,        loader: 'babel-loader'      },      {        test: /\.(css|less)$/,        use: ["style-loader", "css-loader"]      }    ]  },

Since you are rendering your React components which depend on the webpack CSS loader in the backend, on your Express server, you need to run your server-side code through webpack, just as you do your client-side code.

In the project I'm currently working on, I have two webpack builds, each with their own config. One produces a bundle named server.js, the other client.js. In production, I start the server by running node server.js. For local dev, I use a script that rebuilds my server.js when changes in the backend are detected.

It looks like this (file name backend-dev.js):

const path = require('path');const webpack = require('webpack');const spawn = require('child_process').spawn;const compiler = webpack({    // add your webpack configuration here});const watchConfig = {    // compiler watch configuration    // see https://webpack.js.org/configuration/watch/    aggregateTimeout: 300,    poll: 1000};let serverControl;compiler.watch(watchConfig, (err, stats) => {    if (err) {        console.error(err.stack || err);        if (err.details) {            console.error(err.details);        }        return;    }    const info = stats.toJson();    if (stats.hasErrors()) {        info.errors.forEach(message => console.log(message));        return;    }    if (stats.hasWarnings()) {        info.warnings.forEach(message => console.log(message));    }    if (serverControl) {        serverControl.kill();    }    // change server.js to the relative path to the bundle created by webpack, if necessary    serverControl = spawn('node', [path.resolve(__dirname, 'server.js')]);    serverControl.stdout.on('data', data => console.log(data.toString()));    serverControl.stderr.on('data', data => console.error(data.toString()));});

You can start this script on the command line with

node backend-dev.js

When you make changes in your server code, webpack will recompile and restart your server.

Note that I have omitted the actual webpack configuration from the above example, because your mileage will vary. You insert it at the beginning, see code comment.