Vue-awesome not integrating with electron-forge [ Modules with ES6 imports ]

[khawarizmus]

• [x] I have read the contribution documentation for this project.
• [x] I agree to follow the code of conduct that this project follows, as appropriate.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Please describe your issue: I am just trying to use vue-awesome in my app and i tried all workarounds that i can think of but still can't find a solution to integrate it with electron-forge.

The error:

Uncaught SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.require.extensions.(anonymous function) [as .js] (D:\Work\NEM\paper-wallet\node_modules\electron-compile\lib\require-hook.js:77:14)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at file:///D:/Work/NEM/paper-wallet/src/js/main.js:31:1

My code

import 'vue-awesome/icons';
import Icon from './components/Icon.vue';

Vue.use(VueRouter);
Vue.use(ElementUI);
Vue.component('icon', Icon);

notice here that i am importing the Icon.vue component from my local folder simply because this line import Icon from 'vue-awesome/components/Icon don't work for me.

What does your config.forge data in package.json look like?

"config": {
    "forge": {
      "make_targets": {
        "win32": [
          "squirrel"
        ],
        "darwin": [
          "zip"
        ],
        "linux": [
          "deb",
          "rpm"
        ]
      },
      "electronPackagerConfig": {},
      "electronWinstallerConfig": {
        "name": "paper_wallet"
      },
      "electronInstallerDebian": {},
      "electronInstallerRedhat": {},
      "github_repository": {
        "owner": "",
        "name": ""
      },
      "windowsStoreConfig": {
        "packageName": "",
        "name": "paperwallet"
      }
    }
  },

Please provide either a failing minimal testcase (with a link to the code) or detailed steps to reproduce your problem.

For a test case just try using vue-awesome in your project and let me know if it works

[malept]

This is probably related: https://github.com/electron-userland/electron-forge-templates/issues/26#issuecomment-293884781

[MarshallOfSound]

It sounds like the vue-awesome module still has ES6 import statements in it, not much we can do about that 😭

[khawarizmus]

@MarshallOfSound there isn't any workarround that will help me? babel, webpack? something that can help me integrate this ? and just so that i understand electron-forge can't load css and ES6 ? because i got the same problem mentioned in #26 and i solved it the same way

in my case i was doing this

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

this is to import the theme for element-ui mentioned here

and please let me understand where is the problem exactly? i don't really get it why electron doesn't support ES6 features like import

[MarshallOfSound]

Just want to point out my comment was just a guess, I haven't had time to look into this yet

[khawarizmus]

@MarshallOfSound wow your answer was fast thanks... i have updated my comment since then tho 😅 and i can confirm that it's because of the ES6 imports as we can see in the screenshot.

[MarshallOfSound]

@gimyboya From a quick investigation it looks like what you actually want to do is

import { icons } from 'vue-awesome';

why electron doesn't support ES6 features like import

No browser supports ES6 import statements, it hasn't been implemented anywhere AFAIK, the import support in forge is for your files only (not node_modules) thanks to babel passthrough

and just so that i understand electron-forge can't load css

Importing a css file is a webpack thing that doesn't make anysense in a javascript setting, it's just how they decided to do it. You wouldn't include a text file in a c++ project, why would you import a CSS file in a JS project... 😕

If you want to load that css you should do it through a link tag

[khawarizmus]

@MarshallOfSound Thank you very much for the quick support...

If you want to load that css you should do it through a link tag

I am doing exactly that

the import support in forge is for your files only (not node_modules) thanks to babel passthrough

Is there a way for me to transpile the code or use something like babel or webpack..? and if so any links to a working example?

[MarshallOfSound]

@gimyboya You don't want to be transpiling your node_modules folder, it will be slow, painful and shouldn't be needed. Modules shouldn't ship dist files with ES6 import statements in them, if you think your original usage was correct raise an issue with the project and ask them to ship ES5 compatible sources

[khawarizmus]

@MarshallOfSound Thank you very much for your support

i have finally found a workarround i will show my solution here for anyone with the same problem as me and i will mention it in the other project as well

first i have copied the file Icon.vue in vue-awesome/components folder to my components folder and i have changed one line of code there in the script tag

// let icons = {} this line has been replaced by the line below
import { icons } from 'vue-awesome';

then i import the icon component as normal component and it works fine