Currently, I am in the process of developing a Vue application that operates within Electron. To simplify the setup procedure, I have opted to utilize vue-cli along with the helpful vue-cli-plugin-electron-builder.
The project was initially set up by executing:
vue create
During the feature selection process, I made sure to include 'babel'.
Following this, I proceeded to add the necessary Electron packages by running:
vue add electron-builder
In addition, a class was created in the file 'foo.js':
export class Foo {
foo = "Hello";
}
Subsequently, when attempting to import this class into the generated 'main.js' file (where the Vue instance is initialized), I utilized:
npm run electron:serve
This command effectively launches the application in Electron without any errors, meeting my expectations.
However, upon trying to import the 'Foo' class into the generated 'background.js' file (where the Electron windows are instantiated) and running 'npm run electron:serve', an error message is displayed:
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, as currently no loaders are configured. See https://webpack.js.org/concepts#loaders
| export class Foo {
> foo = "Hello";
| }
|
@ ./src/background.js 9:0-28
@ multi ./src/background.js
After consulting the README on the GitHub page for @vue/babel-preset-app, it appears that the 'plugin-proposal-class-properties' should be used. This seems like the suitable solution for this issue.
I also attempted to configure the 'vue.config.js' file using 'configureWebpack' and specified the use of babel-loader with the Vue preset. Despite these efforts, the same error persists.
Is there a method available for utilizing class properties when importing a module into the 'background.js' file?