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

neurocmd commented 3 years ago

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

> webpack-mpa-starter@0.1.0 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! webpack-mpa-starter@0.1.0 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 webpack-mpa-starter@0.1.0 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 commented 3 years ago

Hello! Any fix for this issue?

DiFuks commented 3 years ago

Please merge this pull request https://github.com/JetBrains/svg-sprite-loader/pull/403

Krasnopir commented 3 years ago

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

DiFuks commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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)