vuejs use babel plugin-proposal-class-properties

Question

I have a class where I use some static properties like this:

class Entity {
  static LIMIT = 10;
}

So, i can do:

Entity.LIMIT

In order to do that I'm using babel plugin-proposal-class-properties and in my .babelrc I have:

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

I'm using jest and my test passes using that config. Now I need to use funcionality of Entity class inside a vuejs component. But I got the error: Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type

I also tried a babel config file in my project root: babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
};

But didn't work. How can i configure vuejs, to make work this babel plugin?

I'm using vue2.6.11 and vue-cli 3

This should be doable out of the box with Vue-CLI 3. Did you try doing it without this particular babel plugin? — Yom T.

DocBoucou DocBoucou · Accepted Answer · 2020-10-07T09:40:48

I got this exact same issue when trying to use "importabular" with vuejs (vuejs 2, vue-cli-3). Importabular uses class properties, after some research I found this babel plugins (plugin-proposal-class-properties), I installed it and added it in vue.config.js.

To finally make it work, I had to add "importabular" (or the nested path) in the transpileDependencies: option. Why that? Because, by default, Babel ignores whatever is in node_module, so you have to tell Babel to not ignore this specific folder.

So, if you want to use babel or some babel plugins with some node_module with vue you should modify the vue.config.js as follow :

module.exports = {
  transpileDependencies: [
    'path/in/node_module',
  ],
}

and change the babel.config.js as follow:

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties"],
  ]
}

vuejs use babel plugin-proposal-class-properties

2 Answers