Fails with webpack 5: Cannot find module 'webpack/lib/RuleSet'

[neurocmd]

I am facing a problem with webpack 5.

I have the following settings:

...
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
...

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]',
              extract: true
            }
          },
          'svgo-loader'
        ]
      },
      ...
    ]
  },
  plugins: [
    ...
    new SpriteLoaderPlugin()
    ...
  ]
}

and getting the next error:

D:\Projects\webpack5-mpa-starter>npm run dev

> [email protected] dev D:\Projects\webpack5-mpa-starter
> cross-env NODE_ENV=development BROWSERSLIST_ENV=modern webpack-dev-server --progress --config webpack/webpack.config.dev.js

internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'webpack/lib/RuleSet'
Require stack:
- D:\Projects\webpack5-mpa-starter\node_modules\svg-sprite-loader\lib\utils\get-matched-rule.js
- D:\Projects\webpack5-mpa-starter\node_modules\svg-sprite-loader\lib\utils\index.js
- D:\Projects\webpack5-mpa-starter\node_modules\svg-sprite-loader\lib\plugin.js
- D:\Projects\webpack5-mpa-starter\node_modules\svg-sprite-loader\plugin.js
- D:\Projects\webpack5-mpa-starter\webpack\webpack.config.base.js
- D:\Projects\webpack5-mpa-starter\webpack\webpack.config.dev.js
- D:\Projects\webpack5-mpa-starter\node_modules\webpack-cli\bin\utils\convert-argv.js
- D:\Projects\webpack5-mpa-starter\node_modules\webpack-dev-server\bin\webpack-dev-server.js
←[90m    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:687:27)←[39m
←[90m    at Module.require (internal/modules/cjs/loader.js:849:19)←[39m
←[90m    at require (internal/modules/cjs/helpers.js:74:18)←[39m
    at Object.<anonymous> (D:\Projects\webpack5-mpa-starter\node_modules\←[4msvg-sprite-loader←[24m\lib\utils\get-matched-rule.js:2:17)
←[90m    at Module._compile (internal/modules/cjs/loader.js:956:30)←[39m
←[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)←[39m
←[90m    at Module.load (internal/modules/cjs/loader.js:812:32)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:724:14)←[39m
←[90m    at Module.require (internal/modules/cjs/loader.js:849:19)←[39m
←[90m    at require (internal/modules/cjs/helpers.js:74:18)←[39m
    at Object.<anonymous> (D:\Projects\webpack5-mpa-starter\node_modules\←[4msvg-sprite-loader←[24m\lib\utils\index.js:7:33)
←[90m    at Module._compile (internal/modules/cjs/loader.js:956:30)←[39m
←[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)←[39m
←[90m    at Module.load (internal/modules/cjs/loader.js:812:32)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:724:14)←[39m {
  code: ←[32m'MODULE_NOT_FOUND'←[39m,
  requireStack: [
    ←[32m'D:\\Projects\\webpack5-mpa-starter\\node_modules\\svg-sprite-loader\\lib\\utils\\get-matched-rule.js'←[39m,
    ←[32m'D:\\Projects\\webpack5-mpa-starter\\node_modules\\svg-sprite-loader\\lib\\utils\\index.js'←[39m,
    ←[32m'D:\\Projects\\webpack5-mpa-starter\\node_modules\\svg-sprite-loader\\lib\\plugin.js'←[39m,
    ←[32m'D:\\Projects\\webpack5-mpa-starter\\node_modules\\svg-sprite-loader\\plugin.js'←[39m,
    ←[32m'D:\\Projects\\webpack5-mpa-starter\\webpack\\webpack.config.base.js'←[39m,
    ←[32m'D:\\Projects\\webpack5-mpa-starter\\webpack\\webpack.config.dev.js'←[39m,
    ←[32m'D:\\Projects\\webpack5-mpa-starter\\node_modules\\webpack-cli\\bin\\utils\\convert-argv.js'←[39m,
    ←[32m'D:\\Projects\\webpack5-mpa-starter\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'←[39m
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `cross-env NODE_ENV=development BROWSERSLIST_ENV=modern webpack-dev-server --progress --config webpack/webpack.config.dev.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Zaman\AppData\Roaming\npm-cache\_logs\2020-10-12T10_12_39_098Z-debug.log

Loader not ready for webpack 5 yet?

[titanve]

Hello! Any fix for this issue?

[DiFuks]

Please merge this pull request #403

[Krasnopir]

i became to use @svgr/webpack
https://www.npmjs.com/package/@svgr/webpack

[DiFuks]

@Krasnopir I need runtime sprite injection (https://github.com/JetBrains/svg-sprite-loader#runtime-configuration)
As I understand it, @svgr/webpack does not support this mode

[Krasnopir]

@DiFuks I agree. Not suitable for all cases. For some projects, it is impossible migrate, so those projects stay on 4 webpack. But this is a good alternative for that projects where you can use embed svg instead of a sprite.
SVGR is not suitable in cases when there are many repeated icons on the page. For example - catalog with infinity scroll and many icons on product cards (favorite, basket, phone, letter, discounts, etc.), in this case, icons will greatly increase the DOM
In general, you need to look at the situation and where possible, you can try to use SVGR.
For projects where sprite is strongly needed, I am still waiting for a new version of the svg-sprite-loader)

[DiFuks]

@Krasnopir Thanks for the answer. I am working with a legacy project. So I will wait for a new version of the svg-sprite-loader)

[bit-app-3000]

Hi, any update?

[glen-84]

Duplicate of #359.

[izaika]

Found a workaround without forking or publishing packages.
Answered here: #359

[glen-84]

@izaika @DanielOrtel @beautyfree

You don't think this is a duplicate?

[glen-84]

Fixed in v5.1.1 (?).

/cc @d3x42.

[Eli-Black-Work]

(Note to everyone following this thread that 5.1.1 hasn't been released yet, for reasons outline here: #403 (comment))

[d3x42]

Should be fine now (v5.1.1 published)

[SystemDZ]

npm i -D webpack solved it for me