svg-sprite-loader icon indicating copy to clipboard operation
svg-sprite-loader copied to clipboard

NextJS 10.1.2 Error: Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'

Open AlexisWalravens opened this issue 4 years ago • 7 comments

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 avatar Mar 31 '21 10:03 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

AlexisWalravens avatar Mar 31 '21 12:03 AlexisWalravens

any update on this issue?

dmngu9 avatar Apr 08 '21 01:04 dmngu9

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

KingPengZero avatar Apr 16 '21 06:04 KingPengZero

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

pangxiaolong avatar Apr 21 '21 09:04 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?

pangxiaolong avatar Apr 21 '21 09:04 pangxiaolong

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

AlexisWalravens avatar Apr 21 '21 12:04 AlexisWalravens

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.

bzin avatar May 06 '21 09:05 bzin