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

[Jarvis4555]

Version

16.0.0-beta.4

Reproduction link

https://codesandbox.io/s/hopeful-mestorf-rkxnj?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

RUN npm run build

What is expected?

No errors reported.

What is actually happening?

ERROR  Failed to compile with 2 errors                                                                                                                    2:20:54 PM

error  in ./src/App.vue

Module build failed: TypeError: loaderContext.getResolve is not a function
   at getWebpackImporter (C:\Users\1ando\Desktop\Website\crud\node_modules\sass-loader\dist\utils.js:274:37)
   at Object.loader (C:\Users\1ando\Desktop\Website\crud\node_modules\sass-loader\dist\index.js:42:61)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=1!./src/App.vue 4:14-357 13:3-17:5 14:22-365
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/components/Sidebar.vue

Module build failed: TypeError: loaderContext.getResolve is not a function
   at getWebpackImporter (C:\Users\1ando\Desktop\Website\crud\node_modules\sass-loader\dist\utils.js:274:37)
   at Object.loader (C:\Users\1ando\Desktop\Website\crud\node_modules\sass-loader\dist\index.js:42:61)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7d622f5c","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Sidebar.vue 4:14-372 13:3-17:5 14:22-380
@ ./src/components/Sidebar.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Navbar.vue
@ ./src/components/Navbar.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

In order to solve this error I found out that I should add the following snippet in my webpack.base.config.js:

module.exports = {
const {VueLoaderPlugin} = require('vue-loader-plugin')
plugins: [
    new VueLoaderPlugin()
  ]
}

But when I added, I got this new error

> crud@1.0.0 dev C:\Users\1ando\Desktop\Website\crud
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

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

Error: Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'
Require stack:
- C:\Users\1ando\Desktop\Website\crud\node_modules\vue-loader-plugin\index.js
- C:\Users\1ando\Desktop\Website\crud\build\webpack.base.conf.js
- C:\Users\1ando\Desktop\Website\crud\build\webpack.dev.conf.js
- C:\Users\1ando\Desktop\Website\crud\node_modules\webpack\bin\convert-argv.js
- C:\Users\1ando\Desktop\Website\crud\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
    at Function.Module._load (internal/modules/cjs/loader.js:864:27)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (C:\Users\1ando\Desktop\Website\crud\node_modules\vue-loader-plugin\index.js:4:31)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\1ando\\Desktop\\Website\\crud\\node_modules\\vue-loader-plugin\\index.js',
    'C:\\Users\\1ando\\Desktop\\Website\\crud\\build\\webpack.base.conf.js',
    'C:\\Users\\1ando\\Desktop\\Website\\crud\\build\\webpack.dev.conf.js',
    'C:\\Users\\1ando\\Desktop\\Website\\crud\\node_modules\\webpack\\bin\\convert-argv.js',
    'C:\\Users\\1ando\\Desktop\\Website\\crud\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! crud@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the crud@1.0.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\1ando\AppData\Roaming\npm-cache\_logs\2020-07-27T09_51_41_520Z-debug.log

<!-- generated by vue-issues. DO NOT REMOVE -->

Suggest a way out to fix this error.Thanks in advance

[haoqunjiang]

1. This is not a valid reproduction. I can't reproduce the error messages with it;
2. I've no idea what you are trying to do with webpack 3, vue-loader v16 beta, vue-loader-plugin, and Vue 2. That's a very weird combination. Which tutorial are you following?

[haoqunjiang]

Actually I think you are asking the wrong question here - and posted wrong version information.

I guess you are using webpack 3 and vue-loader 13, not 16 beta, so you should not add vue-loader-plugin because it's only for webpack 5 compatibility and is no longer needed.

And if you googled the original error message "TypeError: loaderContext.getResolve is not a function" then you can easily find out that it's likely fixable with this StackOverflow answer: https://stackoverflow.com/a/58230550/2302258

[haoqunjiang]

Last but not least, next time, please, DO READ THE "Before You Start…" PART OF THE ISSUE HELPER BEFORE OPENING AN ISSUE.

[Jarvis4555]

Actually I think you are asking the wrong question here - and posted wrong version information.

I guess you are using webpack 3 and vue-loader 13, not 16 beta, so you should not add vue-loader-plugin because it's only for webpack 5 compatibility and is no longer needed.

And if you googled the original error message "TypeError: loaderContext.getResolve is not a function" then you can easily find out that it's likely fixable with this StackOverflow answer: https://stackoverflow.com/a/58230550/2302258

Yes that is how i resolved the above error but i got a new error again

[Jarvis4555]

Last but not least, next time, please, DO READ THE "Before You Start…" PART OF THE ISSUE HELPER BEFORE OPENING AN ISSUE.

That is how opened the issue Please check the reproduction link there you'll find my package json and webpack.base.conf.js

[Jarvis4555]

1. This is not a valid reproduction. I can't reproduce the error messages with it;
2. I've no idea what you are trying to do with webpack 3, vue-loader v16 beta, vue-loader-plugin, and Vue 2. That's a very weird combination. Which tutorial are you following?

Coming to version Vue Issue Helper automatically generated that version

[haoqunjiang]

Yes that is how i resolved the above error but i got a new error again

Then what's the error? You didn't mention that.

That is how opened the issue Please check the reproduction link there you'll find my package json and webpack.base.conf.js

That's missing a lot of relevant files and not runnable.
Have you read the linked "What is a minimal reproduction, and why is it required?" section? https://new-issue.vuejs.org/?repo=vuejs/vue-loader#why-repro

Coming to version Vue Issue Helper automatically generated that version

Then you need to select the actual version from the dropdown.

[Jarvis4555]

Yes that is how i resolved the above error but i got a new error again

Then what's the error? You didn't mention that.

That is how opened the issue Please check the reproduction link there you'll find my package json and webpack.base.conf.js

That's missing a lot of relevant files and not runnable.
Have you read the linked "What is a minimal reproduction, and why is it required?" section? https://new-issue.vuejs.org/?repo=vuejs/vue-loader#why-repro

Coming to version Vue Issue Helper automatically generated that version

Then you need to select the actual version from the dropdown.

I wont be able to share the whole project here as it contains several keys and other sesitive information. Request you to let me know if there's any other way to seek help .Thank you