英文:
Uncaught TypeError: Cannot read properties of undefined (reading 'install')
问题
这个错误的意思是什么,为什么有时会发生?
> VM3327 vue.esm.js:5829 未捕获的TypeError: 无法读取未定义的属性(读取'install')
> 在 Vue.use(VM3327 vue.esm.js:5829:31)
> 在 eval(VM3493 index.js:10:45)
> 在./src/router/index.js(VM3317 chat.js:173:1)
> 在__webpack_require__(VM3317 chat.js:1973:42)
> 在 eval(VM3326 main.js:5:65)
> 在./src/main.js(VM3317 chat.js:162:1)
> 在__webpack_require__(VM3317 chat.js:1973:42)
> 在VM3317 chat.js:2037:37
> 在VM3317 chat.js:2039:12
Vue.use @ VM3327 vue.esm.js:5829
eval @ VM3493 index.js:10
./src/router/index.js @ VM3317 chat.js:173
webpack_require @ VM3317 chat.js:1973
eval @ VM3326 main.js:5
./src/main.js @ VM3317 chat.js:162
webpack_require @ VM3317 chat.js:1973 (anonymous) @ VM3317 chat.js:2037 (anonymous) @ VM3317 chat.js:2039
我在一个Django项目中使用了vuejs。
package.json
{
"name": "vue-chat-app-two",
"version": "0.1.0",
"private": true,
"description": "## Project setup ``` yarn install ```",
"author": "",
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack --mode production",
"lint": "vue-cli-service lint",
"dev": "webpack-dev-server --mode development --hot",
"start": "concurrently \"python3 manage.py runserver\" \"npm run dev\""
},
"main": "babel.config.js",
"dependencies": {
"axios": "^1.4.0",
"core-js": "^3.30.2",
"vue": "^3.3.4",
"vue-native-websocket": "^2.0.15",
"vue-router": "^4.2.2",
"vue-scrollto": "^2.20.0"
},
"devDependencies": {
"@babel/core": "^7.22.1",
"@babel/eslint-parser": "^7.21.8",
"@babel/preset-env": "^7.22.4",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-loader": "^9.1.2",
"concurrently": "^8.1.0",
"css-loader": "^6.8.1",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.7.1",
"file-loader": "^6.2.0",
"sass": "^1.63.2",
"sass-loader": "^10.4.1",
"style-loader": "^3.3.3",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-loader": "^15.10.1",
"vue-template-compiler": "^2.7.14",
"webpack": "^5.86.0",
"webpack-bundle-tracker": "^1.8.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.0"
},
"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"
],
"keywords": [],
"license": "ISC"
}
当我在vuejs终端中运行以下命令时:npx webpack --config webpack.config.js
,我得到类似以下的结果:
> [webpack-cli] Error:
>
> Vue packages version mismatch:
>
> - vue@3.3.4 (.../vue-chat-app-two/node_modules/vue/index.js)
> - vue-template-compiler@2.7.14 (.../vue-chat-app-two/node_modules/vue-template-compiler/package.json)
>
> 这可能会导致工作不正确。确保同时使用相同的版本。如果您使用的是vue-loader@>=10.0,只需更新vue-template-compiler。如果您使用的是vue-loader@<10.0或vueify,则重新安装vue-loader/vueify应该会升级vue-template-compiler到最新版本。
>
> ```lang-none
> at Object.
> at Module._compile (node:internal/modules/cjs/loader:1103:14)
> at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155: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)
> at require (node:internal/modules/cjs/helpers:102:18)
> at loadFromContext (.../vue-chat-app-two/node_modules/vue-loader/lib/compiler.js:30:10)
> at loadTemplateCompiler (.../vue-chat-app-two/node_modules/vue-loader/lib/compiler.js:37:12)
> at exports.resolveCompiler (.../vue-chat-app-two/node_modules/vue-loader/lib/compiler.js:25:23)
> at VueLoaderPlugin.apply (.../vue-chat-app-two/node_modules/vue-loader/lib/plugin-webpack5.js:144:22)
> at createCompiler (.../vue-chat-app-two/node_modules/webpack/lib/webpack.js:73:12)
> at create (.../vue-chat-app-two/node_modules/webpack/lib/webpack.js:134:16)
> at webpack (.../vue-chat-app-two/node_modules/webpack/lib/webpack.js:142:47)
> at WebpackCLI.f [as webpack] (.../vue-chat-app-two/node_modules/webpack/lib/index.js:72:16)
> at WebpackCLI.createCompiler (.../vue-chat-app-two/node_modules/webpack-cli/lib/webpack
英文:
What does this error mean and why does it sometimes happen?
> VM3327 vue.esm.js:5829 Uncaught TypeError: Cannot read properties of
> undefined (reading 'install')
> at Vue.use (VM3327 vue.esm.js:5829:31)
> at eval (VM3493 index.js:10:45)
> at ./src/router/index.js (VM3317 chat.js:173:1)
> at webpack_require (VM3317 chat.js:1973:42)
> at eval (VM3326 main.js:5:65)
> at ./src/main.js (VM3317 chat.js:162:1)
> at webpack_require (VM3317 chat.js:1973:42)
> at VM3317 chat.js:2037:37
> at VM3317 chat.js:2039:12 Vue.use @ VM3327 vue.esm.js:5829 eval @ VM3493 index.js:10 ./src/router/index.js @ VM3317 chat.js:173
> webpack_require @ VM3317 chat.js:1973 eval @ VM3326 main.js:5 ./src/main.js @ VM3317 chat.js:162
> webpack_require @ VM3317 chat.js:1973 (anonymous) @ VM3317 chat.js:2037 (anonymous) @ VM3317 chat.js:2039
I'm using vuejs in a django project.
package.json
{
"name": "vue-chat-app-two",
"version": "0.1.0",
"private": true,
"description": "## Project setup ``` yarn install ```",
"author": "",
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack --mode production",
"lint": "vue-cli-service lint",
"dev": "webpack-dev-server --mode development --hot",
"start": "concurrently \"python3 manage.py runserver\" \"npm run dev\""
},
"main": "babel.config.js",
"dependencies": {
"axios": "^1.4.0",
"core-js": "^3.30.2",
"vue": "^3.3.4",
"vue-native-websocket": "^2.0.15",
"vue-router": "^4.2.2",
"vue-scrollto": "^2.20.0"
},
"devDependencies": {
"@babel/core": "^7.22.1",
"@babel/eslint-parser": "^7.21.8",
"@babel/preset-env": "^7.22.4",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-loader": "^9.1.2",
"concurrently": "^8.1.0",
"css-loader": "^6.8.1",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.7.1",
"file-loader": "^6.2.0",
"sass": "^1.63.2",
"sass-loader": "^10.4.1",
"style-loader": "^3.3.3",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-loader": "^15.10.1",
"vue-template-compiler": "^2.7.14",
"webpack": "^5.86.0",
"webpack-bundle-tracker": "^1.8.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.0"
},
"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"
],
"keywords": [],
"license": "ISC"
}
When I do in vuejs terminal: npx webpack --config webpack.config.js
I get something like this:
> [webpack-cli] Error:
>
> Vue packages version mismatch:
>
> - vue@3.3.4 (.../vue-chat-app-two/node_modules/vue/index.js)
> - vue-template-compiler@2.7.14 (.../vue-chat-app-two/node_modules/vue-template-compiler/package.json)
>
> This may cause things to work incorrectly. Make sure to use the same
> version for both. If you are using vue-loader@>=10.0, simply update
> vue-template-compiler. If you are using vue-loader@<10.0 or vueify,
> re-installing vue-loader/vueify should bump vue-template-compiler to
> the latest.
>
> lang-none
> at Object.<anonymous> (.../vue-chat-app-two/node_modules/vue-template-compiler/index.js:10:9)
> at Module._compile (node:internal/modules/cjs/loader:1103:14)
> at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155: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)
> at require (node:internal/modules/cjs/helpers:102:18)
> at loadFromContext (.../vue-chat-app-two/node_modules/vue-loader/lib/compiler.js:30:10)
> at loadTemplateCompiler (.../vue-chat-app-two/node_modules/vue-loader/lib/compiler.js:37:12)
> at exports.resolveCompiler (.../vue-chat-app-two/node_modules/vue-loader/lib/compiler.js:25:23)
> at VueLoaderPlugin.apply (.../vue-chat-app-two/node_modules/vue-loader/lib/plugin-webpack5.js:144:22)
> at createCompiler (.../vue-chat-app-two/node_modules/webpack/lib/webpack.js:73:12)
> at create (.../vue-chat-app-two/node_modules/webpack/lib/webpack.js:134:16)
> at webpack (.../vue-chat-app-two/node_modules/webpack/lib/webpack.js:142:47)
> at WebpackCLI.f [as webpack] (.../vue-chat-app-two/node_modules/webpack/lib/index.js:72:16)
> at WebpackCLI.createCompiler (.../vue-chat-app-two/node_modules/webpack-cli/lib/webpack-cli.js:1785:29)
>
I tried @Ewan Reveille's answer:
I changed vue-template-compiler
to 3.3.4 instead of 2.7.14, then I did npm install
.
I got something like this in the terminal:
> npm WARN ERESOLVE overriding peer dependency npm WARN While resolving:
> vue-chat-app-two@0.1.0 npm WARN Found: vue-template-compiler@2.7.14
> npm WARN node_modules/vue-template-compiler npm WARN dev
> vue-template-compiler@"^3.3.4" from the root project npm WARN 1 more
> (@vue/cli-service) npm WARN npm WARN Could not resolve dependency:
> npm WARN peerOptional vue-template-compiler@"^2.0.0" from
> @vue/cli-service@5.0.8 npm WARN node_modules/@vue/cli-service npm WARN
> dev @vue/cli-service@"~5.0.0" from the root project npm WARN 4 more
> (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...) npm WARN ERESOLVE
> overriding peer dependency npm WARN While resolving:
> vue-chat-app-two@0.1.0 npm WARN Found: vue-template-compiler@2.7.14
> npm WARN node_modules/vue-template-compiler npm WARN dev
> vue-template-compiler@"^3.3.4" from the root project npm WARN 1 more
> (@vue/cli-service) npm WARN npm WARN Could not resolve dependency:
> npm WARN peerOptional vue-template-compiler@"^2.0.0" from
> @vue/cli-service@5.0.8 npm WARN node_modules/@vue/cli-service npm WARN
> dev @vue/cli-service@"~5.0.0" from the root project npm WARN 4 more
> (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...) npm WARN ERESOLVE
> overriding peer dependency npm WARN While resolving:
> vue-chat-app-two@0.1.0 npm WARN Found: vue-template-compiler@2.7.14
> npm WARN node_modules/vue-template-compiler npm WARN dev
> vue-template-compiler@"^3.3.4" from the root project npm WARN 1 more
> (@vue/cli-service) npm WARN npm WARN Could not resolve dependency:
> npm WARN peerOptional vue-template-compiler@"^2.0.0" from
> @vue/cli-service@5.0.8 npm WARN node_modules/@vue/cli-service npm WARN
> dev @vue/cli-service@"~5.0.0" from the root project npm WARN 4 more
> (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...) npm ERR! code
> ETARGET npm ERR! notarget No matching version found for
> vue-template-compiler@^3.3.4. npm ERR! notarget In most cases you or
> one of your dependencies are requesting npm ERR! notarget a package
> version that doesn't exist.
>
> npm ERR! A complete log of this run can be found in: npm ERR!
> .../.npm/_logs/2023-06-08T10_51_43_433Z-debug-0.log
Update 9 June 2023
webpack.config.js:
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
mode: 'development',
context: __dirname,
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '../static/js'),
publicPath: '/static/js/',
filename: 'chat.js',
},
plugins: [
new VueLoaderPlugin(),
new BundleTracker({ filename: '../vue-chat-app-two/webpack-stats.json' }),
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: false
},
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
},
],
},
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js',
},
extensions: ['.*','.js','.vue','.json']
},
};
答案1
得分: 1
错误可能是由于Vue.js版本与其模板编译器版本不兼容引起的。要纠正这个问题,您应该将"devDependencies"中的这一行修改为:"vue-template-compiler": "^3.3.4",而不是"vue-template-compiler": "^2.7.14"。
然后,在终端中运行命令"npm install"以更新您的依赖项。
希望这有所帮助!
英文:
The error probably comes from the incompatibility between Vue.js version and its template compiler version. To correct that, you should modify the line : "vue-template-compiler": "^2.7.14", in "devDependencies" by the line "vue-template-compiler": "^3.3.4",.
Then, launch the command "npm install" in the terminal to update your dependencies.
I hope this helped !
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论