Webpack issues when setting up Sass and CSS modules in React

Question

My app doesn't compile and when I try an npm install i see this:

npm WARN [email protected] requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

However, this only started to happen when I added this plugin to my webpack.config.dev.js:

new ExtractTextPlugin({ filename: 'styles.css', allChunks: true }),

and when I try to run my app i get the following:

/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Chunk.js:824 throw new Error( ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Chunk.js:824:9) at /Users/johnnynolan/Repos/clark-app/node_modules/extract-text-webpack-plugin/dist/index.js:176:48 at Array.forEach () at /Users/johnnynolan/Repos/clark-app/node_modules/extract-text-webpack-plugin/dist/index.js:171:18 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/johnnynolan/Repos/clark-app/node_modules/tapable/lib/HookCodeFactory.js:32:10), :7:1) at AsyncSeriesHook.lazyCompileHook (/Users/johnnynolan/Repos/clark-app/node_modules/tapable/lib/Hook.js:154:20) at Compilation.seal (/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Compilation.js:1214:27) at hooks.make.callAsync.err (/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Compiler.js:547:17) at _done (eval at create (/Users/johnnynolan/Repos/clark-app/node_modules/tapable/lib/HookCodeFactory.js:32:10), :11:1) at _err1 (eval at create (/Users/johnnynolan/Repos/clark-app/node_modules/tapable/lib/HookCodeFactory.js:32:10), :34:22)

Answer 1

ExtractTextPlugin is deprecated. Instead of that, you could use style-loader, css-loader and postcss-loader by adding below code to your webpack and by installing required packages.

{
  test: /\.scss$/,
  use: [{
      loader: 'style-loader' // creates style nodes from JS strings
    },
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: "[name]_[local]_[hash:base64:5]"
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        modules: true,
        localIdentName: "[name]_[local]_[hash:base64:5]"
      } // compiles Sass to CSS
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
  ],
},