ECMAScript class properties not possible in vue electron application?

Question

I'm developing a vue application that runs in electron. For ease of setup I'm using vue-cli with the vue-cli-plugin-electron-builder.

I created the project using:

vue create

made sure to check babel in the feature select

added the electron packages using:

vue add electron-builder

and created a class in foo.js:

export class Foo {
  foo = "Hello";
}

Now, when importing that class in the generated main.js (where the Vue instance gets created) I can use

npm run electron:serve

to run the application in electron. It opens up, shows no errors, all as expected.

But if I try and import the Foo class in the generated background.js (where the electron windows gets created) and run npm run electron:serve it shows me this error:

ERROR  Failed to compile with 1 errors

 error  in ./src/foo.js

Module parse failed: Unexpected token (2:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export class Foo {
>   foo = "Hello";
| }
|

 @ ./src/background.js 9:0-28
 @ multi ./src/background.js

According to the README from the github page for @vue/babel-preset-app it should use the plugin-proposal-class-properties. This sounds exactly like the type of thing that should be used.

I also tried using the vue.config.js with configureWebpack and told it to use the babel-loader with the vue preset. Same error.

Is there a way for me to use class properties when importing a module in the background.js?

LethalFalcon McDoogles LethalFalcon McDoogles · Accepted Answer · 2020-02-27T10:47:55

I found a fix for my problem while looking at the documentation for the vue-cli-plugin-electron-builder.

It uses the webpack-chain package to configure electron specific bundling.

So instead of using configureWebpackin vue.config.js I setup my config as described in the example from webpack-chain:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: config => {
        config.module
          .rule("compile")
          .test(/\.js$/)
          .exclude.add(/(node_modules|dist_electron)/)
          .end()
          .use("babel")
          .loader("babel-loader")
          .options({
            presets: ["@vue/cli-plugin-babel/preset"]
          });
      }
    }
  }
};

Then the imports work as expected.

ECMAScript class properties not possible in vue electron application?

1 Answers