When I run my Nuxt app, I get an error:
Error: [BABEL] C:\Users\my.name\Projects\blabla_project\.nuxt\client.js: --- PLACEHOLDER PACKAGE ---
This @babel/plugin-proposal-private-property-in-object version is not meant to
be imported. Something is importing
@babel/plugin-proposal-private-property-in-object without declaring it in its
dependencies (or devDependencies) in the package.json file.
Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies
to work around this error. This will make this message go away.
(While processing: "C:\\Users\\my.name\\Projects\\fw-2021-fe\\node_modules\\@nuxt\\babel-preset-app\\src\\index.js")
...
I already have installed @babel/plugin-proposal-private-property-in-object in devDependencies and added it to nuxt.config.js file (in build/babel/plugins) and none of that worked. I don't understand why I'm still getting this error if I have installed the package.
Here's my package.json file:
{
"name": "blabla",
"version": "2.4.1",
"description": "Blabla app",
"author": "",
"private": true,
"scripts": {
"loc": "NODE_ENV=local nuxt",
"dev": "NODE_ENV=development nuxt",
"prod": "NODE_ENV=production nuxt",
"win_loc": "SET NODE_ENV=local&&nuxt",
"test": "jest",
"lint": "eslint --ext .js,.vue . && echo Lint Passed ❤",
"lint:fix": "eslint --ext .js,.vue . --quiet --fix"
},
"dependencies": {
"@nuxtjs/axios": "5.13.1",
"@nuxtjs/sentry": "6.0.3",
"@nuxtjs/vuetify": "^1.12.3",
"@sentry/tracing": "7.17.3",
"core-js": "3.31.0",
"dayjs": "1.11.5",
"font-awesome": "4.7.0",
"idle-vue": "2.0.5",
"lodash": "4.17.21",
"msal": "0.1.9",
"nuxt": "2.15.8",
"postcss": "8.4.21",
"postcss-import": "15.1.0",
"postcss-loader": "4.3.0",
"postcss-nested": "6.0.0",
"postcss-url": "10.1.3",
"roboto-fontface": "*",
"socket.io-client": "^4.6.2",
"sweetalert2": "11.6.5",
"vue": "^2.7.14",
"vue-loading-overlay": "3.4.2",
"vue-perfect-scrollbar": "0.2.1",
"vue-quill-editor": "3.0.6",
"vue-server-renderer": "2.7.14",
"vue-sweetalert2": "1.6.4",
"vue-template-compiler": "2.7.14",
"vuelidate": "0.7.7",
"vuex-persistedstate": "2.7.1",
"webpack": "^4.46.0"
},
"devDependencies": {
"@babel/core": "7.12.1",
"@babel/plugin-proposal-private-property-in-object": "7.12.1",
"@babel/preset-env": "7.12.1",
"@nuxtjs/eslint-module": "^3.1.0",
"@nuxtjs/moment": "^1.6.1",
"@vue/test-utils": "^1.1.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^26.5.2",
"eslint": "7.32.0",
"eslint-config-prettier": "^6.7.0",
"eslint-loader": "4.0.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "7.16.0",
"jest": "^26.5.3",
"jest-serializer-vue": "^2.0.2",
"nodemon": "^2.0.19",
"parse-url": "^8.0.0",
"prettier": "^1.19.1",
"vue-jest": "^3.0.7",
"webpack-subresource-integrity": "^1.5.2"
}
}
Here's part of nuxt.config.js where I added plugins:
build: {
// Build Configuration: https://go.nuxtjs.dev/config-build
babel: {
plugins: [
["@babel/plugin-proposal-private-property-in-object", { loose: true }]
]
},
transpile: ["vuetify/lib"],
html: {
...
}
...
}
I tried a lot's of things, from all similar posts I found, but nothing worked. Any ideas how to solve this?
Finally, for me the steps to solve this were following:
Upgrade nuxt version to 2.17 in dependencies:
"nuxt": "2.17.1",
If still needed, upgrade vue version in dependencies to:
"vue": "2.7.14",
Finally, maybe you'll get an error to change some package version because of vue, so do that, and potentially run
npm audit fix