Uncaught SyntaxError: Unexpected token <

Sorry for not to follow the template written in the github textbox but results that I am spanish and I don’t understand the Chinese language =) I was writing my project yesterday and I got integration for vue-codemirror in my project, but this morning when I went to make more write in my project the error described in the title: Uncaught SyntaxError: Unexpected token < But I review my code against the examples in github and is exactly the same…

import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'

// Codemirror
import VueCodeMirror from 'vue-codemirror'
Vue.use(VueCodeMirror)

// stylesheets
import 'font-awesome/css/font-awesome.min.css'

import App from './App'
// import routes from './routes'

Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true

// const router = new Router({
//   routes
// })

/* eslint-disable no-new */
window.a = new Vue({
  ...App
}).$mount('#app')

Also I am using the electron-vue boilerplate described here: link

Here is the root project package.json:

{
  "name": "ylt",
  "version": "0.0.0",
  "description": "Aplicacion que se usara para que la gente pueda estudiar mejor y mas rápido",
  "scripts": {
    "build": "npm run pack && build",
    "build:dir": "npm run pack && build --dir",
    "dev": "node tasks/runner.js",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix app",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.renderer.config.js",
    "postinstall": "npm run lint:fix && cd app && npm install"
  },
  "build": {
    "productName": "ElectronVue",
    "appId": "org.simulatedgreg.electron-vue",
    "category": "public.app-category.tools",
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "files": [
      "dist/",
      "node_modules/",
      "package.json"
    ],
    "mac": {
      "icon": "app/icons/icon.icns"
    },
    "win": {
      "icon": "app/icons/icon.ico"
    },
    "linux": {
      "target": [
        "AppImage"
      ]
    }
  },
  "author": "Greg Holguin <[e-mail]>",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.18.0",
    "babel-runtime": "^6.6.1",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "del": "^2.2.1",
    "devtron": "^1.1.0",
    "electron": "^1.3.1",
    "electron-builder": "^11.4.4",
    "electron-debug": "^1.1.0",
    "electron-devtools-installer": "^2.0.1",
    "electron-rebuild": "^1.1.3",
    "eslint": "^3.13.1",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.16.1",
    "json-loader": "^0.5.4",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.13.1",
    "tree-kill": "^1.1.0",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^2.0.7",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^10.0.2",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  },
  "dependencies": {}
}

Here is the app folder package.json:

{
  "name": "ylt",
  "version": "0.0.0",
  "main": "./dist/main.js",
  "dependencies": {
    "babel-runtime": "^6.23.0",
    "codemirror": "^5.25.2",
    "font-awesome": "^4.7.0",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "vue": "^2.1.10",
    "vue-codemirror": "^3.0.5",
    "vue-electron": "^1.0.6",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.1.2",
    "vuex": "^2.1.1"
  },
  "devDependencies": {
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3"
  },
  "author": ""
}

Image error

Thanks =)

[surmon-china]

The problem is solved.

In main.js:

import CmComponent from 'vue-codemirror/codemirror.vue'
Vue.component('codemirror', CmComponent)

In the component:

<codemirror :options="editorOptions"></codemirror>

Enjoy your work!

[gj1118]

@dope thank you, sir, for taking time out to answer my question. However, doing that I get the error below

In my main.js I am doing

import CmComponent from 'vue-codemirror/codemirror.vue'
Vue.component('codemirror', CmComponent)

and in my component I am just doing

<codemirror :options="editorOptions"></codemirror>

Please help.

Thanks