Webpack: Exclamation mark separated loader lists has been removed

Question

I'm taking over a small react tooling project someone else had stopped maintaining. However, I can't get it to run. It's a problem with the webpack config, and I've attempted to reconstruct it at as small a size as possible but I can't get it to run.

Here's the file currently

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: './client/index.js',
 output: {
  path: path.join(__dirname, 'client'),
  filename: 'bundle.js'
 },
 module: {
     rules:[{
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }],
        
        },
      resolve: { extensions: ['*', '.js', '.jsx'],
        alias: { 'react-dom': '@hot-loader/react-dom'  } },
}
    

This is the error I'm getting:

Error: Compiling RuleSet failed: Exclamation mark separated loader lists has been removed in favor of the 'use' property with arrays (at ruleSet[1].rules[1].loader: style-loader!css-loader)

Answer 1

The error message says that you must config with a use array (ex: use: ['style-loader', 'css-loader'] instead of loader: "style-loader!css-loader". Following is an example from webpack website.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

You can check the detail at https://webpack.js.org/loaders/style-loader/