使用Vue 2配置Webpack 5时出现“Cannot find module 'vue/compiler-sfc'”的错误。

Question

我正在尝试使用Webpack 5和Vue 2设置ModuleFederation。然而，当我尝试启动服务器时，遇到以下错误：

[webpack-cli] Failed to load '/Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'vue/compiler-sfc'
Require stack:
- /Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/vue-loader/dist/index.js
- /Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/webpack.config.js
- /Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/webpack-cli/lib/webpack-cli.js
- /Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/webpack-cli/lib/bootstrap.js
- /Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/webpack-cli/bin/cli.js
- /Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/vue-loader/dist/index.js:8:24)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/vue-loader/dist/index.js',
    '/Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/webpack.config.js',
    '/Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/webpack-cli/lib/webpack-cli.js',
    '/Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/webpack-cli/lib/bootstrap.js',
    '/Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/webpack-cli/bin/cli.js',
    '/Users/pottsiex5/Documents/Random Stuff/modulefed/hello-world/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}

我怀疑这与版本冲突有关，因为我看到建议更新到Vue 3来解决此问题，但这对我不可行。是否可以在Vue 2中运行Webpack 5？我是否只需要安装某个特定版本的软件包？这是我的package.json：

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-loader": "^17.0.0",
    "vue-router": "^3.5.3",
    "webpack-dev-server": "^4.7.4"
  },
  "devDependencies": {
    "@babel/core": "^7.17.7",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/preset-env": "^7.16.11",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-loader": "^8.2.3",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

- Pottsiex5

Answer 1

Vue 2 在使用 vue-loader@16+ 时无法工作。

npm i -D vue-loader@15.9.8

- Batyodie

---

要使用yarn降级，您可以使用yarn upgrade vue-loader@^15.0.0。 - jgangso

这对我在将Vue2升级到最新版本并与Quasar v1一起使用时非常有帮助。 - kubi