CODEWITHSUNDEEP
javascriptvue.jswebpackbabeljs
Zhiskar
Zhiskar

Reputation: 306

How to make @babel/plugin-proposal-private-methods work in the vue.js webpack template?

I have an app based on a vue.js webpack template. I needed to use the syntax of private fields and private methods of classes. For this, I installed @babel/plugin-proposal-private-methods ^7.4.4 and @babel/core^7.0.0. After installing the packages, I tried to build a development version, but I got the following errors.

Webpack version is ^3.6.0, vue ^2.6.10, babel-core ^6.22.1, babel-preset-env ^1.3.2.


    ERROR in ./assets/main.js
    Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Upvotes: 1

Views: 5919

Answers (2)

devzom
devzom

Reputation: 716

Add the following to your nuxt.config.js file under the build section.

build: {
  babel:{
    plugins: [
      ['@babel/plugin-proposal-private-methods', { loose: true }]
    ]
  }
}

Upvotes: 1

Jean de Campredon
Jean de Campredon

Reputation: 46

It looks like you are loading @babel/[email protected] with babel 6.

In other words you are calling the core compiler of babel seven with the api of babel 6.

Releasing babel 7, the babel team went on a major revamp and it's great but not retro compatible.

Your template was probably working with babel 6 and you need some babel 7 plugin. So to sum ip up you'll have to:

  • upgrade all your babel dependencies (cli, core, plugins, presets ...)
  • update your babel config
  • replace the deprecated
  • probably upgrade your webpack babel loader or at least fix the webpack conf

I highly encourage you to read the official upgrading documentation: https://babeljs.io/docs/en/v7-migration You also might want to upgrade webpack.

cheers

Upvotes: 1

Related Questions