Electron-vue: Getting Uncaught SyntaxError: Unexpected token < when using vue-keyboard

[imomaliev]

Hello I am trying to add virtual keyboard https://github.com/MartyWallace/vue-keyboard to my project , but I am keep getting this issue

/path/to/project/node_modules/vue-keyboard/src/keyboard.vue:1 Uncaught SyntaxError: Unexpected token <
    at createScript (vm.js:53)
    at Object.runInThisContext (vm.js:95)
    at Module._compile (module.js:543)
    at Object.Module._extensions..js (module.js:580)
    at Module.load (module.js:488)
    at tryModuleLoad (module.js:447)
    at Function.Module._load (module.js:439)
    at Module.require (module.js:498)
    at require (internal/module.js:20)
    at Object.<anonymous> (/path/to/project/node_modules/vue-keyboard/index.js:1)

System

• Node version: 8.1.0
• NPM version: 5.0.3
• vue-cli version: 2.8.2
• Operating System: Mac OS 10.12.5

[SimulatedGREG]

@imomaliev

Assuming you are on a recent scaffold of electron-vue, there is a special case for some Vue component libraries, specifically those that provide raw *.vue files. Because webpack treats all dependencies as externals, vue-loader is never able to process this file. You will need to add vue-keyboard to the white-list for this to compile correctly. In theory, component libraries should be providing compiled versions of their components that use render functions, but that just isn't always the case in the real world.

https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
https://github.com/SimulatedGREG/electron-vue/blob/master/template/.electron-vue/webpack.renderer.config.js#L14-L21

[imomaliev]

@SimulatedGREG Great! That helped. Thank you!

[SimulatedGREG]

No problem. 😄