vue.jsnpmnuxt.jsnode-modulesbabel-plugin-transform-import

Error with package @babel/plugin-proposal-private-property-in-object even after installing it


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?


Solution

  • 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