Svg-sprite-loader: NextJS 10.1.2 Error: Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'

[AlexisWalravens]

Do you want to request a feature, report a bug or ask a question?
Report a Bug

What is the current behavior?
NextJS throw this error at runtime:
Error: Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'

What is the expected behavior?
Everything to be working (had no issue with 10.0.5)
Edit: After testing the error occurs from 10.0.6 and after
https://github.com/vercel/next.js/releases/tag/v10.0.6

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.
next.config.js:

const path = require('path')

module.exports = {
  future: {
    webpack5: true
  },
  reactStrictMode: true,
  target: 'serverless',

  webpack (config) {
    config.module.rules.push({
      test: /\.svg$/,
      include: path.join(process.cwd(), 'assets', 'icons'),
      use: [
        {
          loader: 'svg-sprite-loader',
        },
        'svgo-loader'
      ]
    })
    return config
  }
}

The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code).
https://github.com/AlexisWalravens/svg-sprite-loader-nextjs-bug-example

Please tell us about your environment:

• Node.js version: 14.16.0
• webpack version: 5.28? (nextjs one)
• svg-sprite-loader version: ? 6.0.2
• OS type & version: MacOS Big Sur 11.2.2

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

./assets/icons/menu.svg
Error: Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'
Require stack:
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/svg-sprite-loader/lib/utils/get-matched-rule-5.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/svg-sprite-loader/lib/utils/get-matched-rule.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/svg-sprite-loader/lib/utils/index.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/svg-sprite-loader/lib/configurator.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/svg-sprite-loader/lib/loader.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/next/dist/compiled/webpack/bundle5.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/next/dist/compiled/webpack/webpack.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/next/dist/next-server/server/config-utils.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/next/dist/next-server/server/config.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/next/dist/next-server/server/next-server.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/next/dist/server/next.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/next/dist/server/lib/start-server.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/next/dist/cli/next-dev.js
- /Users/awa/Documents/Personnal_projects/simply-clean/please-work/node_modules/next/dist/bin/next

Not that if I manually install webpack (5.28) I have another error just after trying to load the svg:
TypeError: cannot find property 'version' of undefined
There is no stack trace provided.

[AlexisWalravens]

I added webpack to the devDependencies and the error is gone but I think it more a workaround than anything else.
It's related to that issue: https://github.com/vercel/next.js/issues/21679
Next fixed it by making the webpack object available but you don't require webpack directly so, it not working.

Also now I have this error:

./assets/icons/menu.svg
TypeError: Cannot read property 'version' of undefined

There is no further stack trace.

Repo is up to date if you want to test: https://github.com/AlexisWalravens/svg-sprite-loader-nextjs-bug-example

[dmngu9]

any update on this issue?

[KingPengZero]

nextjs10.1.2 报错，目前没有办法解决

[pangxiaolong]

I have the same problem, but no one seems to be maintaining the issues

[pangxiaolong]

I added webpack to the devDependencies and the error is gone but I think it more a workaround than anything else.
It's related to that issue: vercel/next.js#21679
Next fixed it by making the webpack object available but you don't require webpack directly so, it not working.

Also now I have this error:

./assets/icons/menu.svg
TypeError: Cannot read property 'version' of undefined

There is no further stack trace.

Repo is up to date if you want to test: https://github.com/AlexisWalravens/svg-sprite-loader-nextjs-bug-example

Have you completely solved this mistake?

[AlexisWalravens]

@pangxiaolong No, as I said it's more a workaround than anything, and it works only when using webpack 4 with NextJS if you switch to v5 the error above is still there.

[bzin]

I also have this issue.

Although the problem is gone when you add webpack package to dependencies.

I would rather not have webpack there since Next.js deals this for me.