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

Question

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.

Answer 1

It looks like you are loading @babel/core@7.XX 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

Answer 2

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

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