Module parse failed: Unexpected token (8:19) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

@nklayman My config file still fails for the files I import into the background.js file as below.

I use mox-vue when for app. When I add my Mobx store file into background.js it gives the following errors. I cannot compile on models with class {}.

My error: in ./src/data/store.js

Module parse failed: Unexpected token (8:19) 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

 class MainStore {
>    group = [];
     groupUsers = [];
    activeUser = {};

MY vue.config.js

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  runtimeCompiler: true,
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/scss/variable.scss";`
      }
    }
  },
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: config => {
        config.module
          .rule('babel')
          .test(/background\.js$/)
          .use('babel')
          .loader('babel-loader')
          .options({
            presets: [['@babel/preset-env', { modules: false }]],
            plugins: ['@babel/plugin-proposal-class-properties']
          })
      },
      nodeIntegration: true,
      externals: ['serialport', 'usb', 'escpos'],
      builderOptions: {
        mac: {
          icon: './src/icons.icns'
        },
        win: {
          icon: './src/icons.ico'
        }
      }
    }
  }
}

[nklayman]

@hulius thanks for the suggestion, I think your analysis that babel wasn’t transpiling the data/store.js file is accurate. When I tested it, I copied the sample code directly into my background.js, so that’s why it worked for me. As for automatically watching the imported files, I actually might be able to do this by having webpack handle recompiling the main process and then watching the output directory for changes. I’ll take a look into this with v3 of this plugin, which I hope to publish an alpha for soon.

[hulius]

Hi,

In your test rule .test(/background\.js$/) you’re only processing background.js file. This works if you do not import other files (which you seems to be doing with ./src/data/store.js).

So you need something more like this

chainWebpackMainProcess: config => {
  config.module
    .rule('babel-background')
    .test(/\.js$/)  // ** HERE **
    .use('babel-loader')
    .loader('babel-loader')
    .options({
      plugins: ['@babel/plugin-proposal-class-properties']
    })
},'

On a side note, if you need hot reload to work you’ll have the same problem : by default only background.js and preload.js are watched. So you’ll need to add your dependencies to the watch list:

pluginOptions: {
    electronBuilder: {
        nodeIntegration: false,
        preload: 'src/preload/preload.js',
        chainWebpackMainProcess: config => {
            config.module
              .rule('babel-background')
              .test(/\.js$/)
              .use('babel-loader')
              .loader('babel-loader')
              .options({
                plugins: ['@babel/plugin-proposal-class-properties']
              })
          },
        mainProcessWatch: ['src/background/*.js']     // ** HERE **
    }
},

It would be cool if the watcher could detect by itself, based on the imports in preload.js and background.js, which files are used in the node process and so which ones should be watched, but I don’t know if it’s easily doable.

(@nklayman: good work on this plugin 👏)