Configuration issue in Vue/Electron hybrid app


#1

Hey, I’m having an issue with my hybrid vue/electron app. I thought it was a babel issue, so I asked for help and got referred here.

Here’s the full support request:

My current .babelrc:

  "presets": ["babel-preset-es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}```

Here's my error message (in electron):
Note: error is in `node_modules/vuex-i18n/dist/vuex-i18n.es.js:808`
The line is `export default index;`

```Uncaught SyntaxError: Unexpected token export 
    at createScript (vm.js:74)
    at Object.runInThisContext (vm.js:116)
    at Module._compile (module.js:533)
    at Object.Module._extensions..js (module.js:580)
    at Module.load (module.js:503)
    at tryModuleLoad (module.js:466)
    at Function.Module._load (module.js:458)
    at Module.require (module.js:513)
    at require (internal/module.js:11)
    at eval (external "vuex-i18n"?a070:1)```

When I change `stage-2` to `stage-3`, here's the error message I get:

```ERROR in ./src/renderer/router/lazyLoading.js
  Module build failed: SyntaxError: Unexpected token (3:46)
  
    1 | // lazy loading Components
    2 | // https://github.com/vuejs/vue-router/blob/dev/examples/lazy-loading/app.js#L8
  > 3 | export default (name, index = false) => () => import(`../components/${name}${index ? '/index' : ''}.vue`)
      |                                               ^
    4 | 
  
   @ ./src/renderer/router/index.js 23:19-43
   @ ./src/renderer/main.js
   @ multi ./.electron-vue/dev-client ./src/renderer/main.js```

And here's my orginal `.babelrc` that also spawned the i8n error:

```{
  "comments": false,
  "env": {
    "main": {
      "presets": [
        ["env", {
          "targets": { "node": 7 }
        }],
        "stage-0"
      ]
    },
    "renderer": {
      "presets": [
        ["env", {
          "modules": false
        }],
        "stage-0"
      ]
    },
    "web": {
      "presets": [
        ["env", {
          "modules": false
        }],
        "stage-0"
      ]
    }
  },
  "plugins": ["transform-runtime", "transform-object-rest-spread"]
}```

Responses:

> you've got Webpack involved, at least in the renderer
>  that should handle ES modules automatically
>  but the error you're getting is from Node, meaning not all the code runs through Webpack

> the main thing to figure out, I'd say, is why the exports aren't being processed by Webpack
> it might be that it's expected behavior, or not
> if it was expected, you'd have to explore other module-processing approaches, but I don't really want to dig into that without knowing what a normal approach for Electron would be

For the record, I've seen and implemented https://github.com/vuejs-templates/webpack/blob/master/template/build/webpack.base.conf.js#L66-L68 > it didn't help.

I've also posted in the electron channel in the atom slack.

For context, I'm trying to get the vuestic admin dashboard to run in an electron app.

#2

I apologize for the formatting; it got messed up in copy-paste translation, and I can’t figure out how to edit the OP.