HelloWorld_vue.txt
package_json.txt
I am trying to use Mobile-friendly picture file input Vue.js component (link: https://github.com/alessiomaffeis/vue-picture-input) in my Vue.js Electron project, but it causes following error message in console:
Uncaught SyntaxError: Unexpected token < at createScript (vm.js:80) at Object.runInThisContext (vm.js:139) at Module._compile (module.js:606) at Object.Module._extensions..js (module.js:653) at Module.load (module.js:561) at tryModuleLoad (module.js:504) at Function.Module._load (module.js:496) at Module.require (module.js:586) at require (internal/module.js:11) at eval (external "vue-picture-input"?62dd:1)
I installed it via npm install vue-picture-inpu --save
.
My component example:
`
{{ msg }}
<script>
import PictureInput from 'vue-picture-input';
export default {
name: 'HelloWorld',
props: {
msg: String
},
components:{
PictureInput
}
}
</script>
<style scoped>
</style>
`
and package.json:
{ "name": "vue-js-cli3-electron", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit", "build:electron": "vue-cli-service build:electron", "serve:electron": "vue-cli-service serve:electron" }, "dependencies": { "source-map-support": "^0.5.4", "vue": "^2.5.16", "vue-picture-input": "^2.1.6", "vuex": "^3.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.0-beta.15", "@vue/cli-plugin-eslint": "^3.0.0-beta.15", "@vue/cli-plugin-unit-jest": "^3.0.0-beta.15", "@vue/cli-service": "^3.0.0-beta.15", "@vue/test-utils": "^1.0.0-beta.16", "babel-core": "7.0.0-bridge.0", "babel-jest": "^22.4.3", "electron": "^2.0.2", "electron-builder": "^20.14.7", "electron-webpack": "^2.1.2", "vue-cli-plugin-electron-builder": "^0.3.2", "vue-template-compiler": "^2.5.16" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "jest": { "moduleFileExtensions": [ "js", "jsx", "json", "vue" ], "transform": { "^.+\\.vue$": "vue-jest", ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", "^.+\\.jsx?$": "babel-jest" }, "moduleNameMapper": { "^@/(.*)$": "<rootDir>/src/$1" }, "snapshotSerializers": [ "jest-serializer-vue" ], "testMatch": [ "<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))" ] }, "electronWebpack": { "renderer": { "sourceDirectory": "src", "webpackConfig": "dist_electron/webpack.renderer.additions.js" }, "main": { "webpackConfig": "dist_electron/webpack.main.additions.js" } }, "build": { "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "node_modules/**/*", "package.json" ] } }
Is it possible to somehow fix this issue?
Thanks