Uncaught SyntaxError: Unexpected token export - vuex-i18n inside cordova-vue

[aaronpatty]

Hi. I'm getting the following error at run-time in the browser. Everything compiles fine, it just encounters this error at runtime and causes the app to crash: _Uncaught SyntaxError: Unexpected token export at Object. (app.js:3128) at webpack_require (app.js:556) at fn (app.js:87) at eval (eval at (app.js:2436), :47:17) at Object. (app.js:2436) at webpack_require (app.js:556) at fn (app.js:87) at Object. (app.js:587) at __webpack_require_ (app.js:556) at app.js:579

Snippet of code at app.js:3129 = eval("var _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n return typeof obj;\n} : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n};\n\n/* vuex-i18n-store defines a vuex module to store locale translations. Make sure\n** to also include the file vuex-i18n.js to enable easy access to localized\n** strings in your vue... it goes on for a VERY long time...

Environment:

• vue-cordova installed via npm
• I started with the vue-cordova-demo-master and have been adding vuex, vue-router, vuex-i18n, etc

Snippet from package.json: "dependencies": { "bootstrap": "^4.0.0", "cordova": "^6.5.0", "cordova-android": "^7.0.0", "cordova-browser": "^4.1.0", "cordova-ios": "~4.2.1", "cordova-plugin-camera": "~2.3.0", "cordova-plugin-contacts": "~2.2.0", "cordova-plugin-device": "~1.1.3", "cordova-plugin-geolocation": "~2.4.0", "cordova-plugin-purchase": "^1.0.4", "cordova-plugin-whitelist": "1", "cross-env": "^3.1.4", "d3": "^4.13.0", "datejs": "^1.0.0-rc3", "firebase": "^4.9.1", "jquery": "^3.3.1", "npm": "^3.0.0", "password-validator": "^4.0.0", "popper.js": "^1.12.9", "tether": "^1.4.3", "validator": "^9.4.0", "vue": "^2.1.0", "vue-cordova": "0.1.2", "vue-router": "^3.0.1", "vuex": "^3.0.1", "vuex-i18n": "^1.10.5", "vuexfire": "^2.3.0" }, "devDependencies": { "autoprefixer": "^6.4.0", "babel-core": "^6.0.0", "babel-eslint": "^7.0.0", "babel-loader": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2": "^6.0.0", "babel-register": "^6.0.0", "chalk": "^1.1.3", "clean-css-cli": "^4.1.10", "connect-history-api-fallback": "^1.1.0", "css-loader": "^0.25.0", "eslint": "^3.7.1", "eslint-config-standard": "^6.1.0", "eslint-friendly-formatter": "^2.0.5", "eslint-loader": "^1.5.0", "eslint-plugin-html": "^1.3.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1", "eventsource-polyfill": "^0.9.6", "express": "^4.13.3", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "function-bind": "^1.0.2", "html-webpack-plugin": "^2.8.1", "http-proxy-middleware": "^0.17.2", "json-loader": "^0.5.4", "node-sass": "^4.7.2", "nodemon": "^1.14.12", "npm-run-all": "^4.1.2", "opn": "^4.0.2", "ora": "^0.3.0", "semver": "^5.3.0", "shelljs": "^0.7.4", "url-loader": "^0.5.7", "vue-loader": "^10.0.0", "vue-style-loader": "^1.0.0", "vue-template-compiler": "^2.1.0", "webpack": "^1.13.2", "webpack-dev-middleware": "^1.8.3", "webpack-hot-middleware": "^2.12.2", "webpack-merge": "^0.14.1" },

Here is the entire main.js: `import Vue from 'vue' import App from './App' import VueCordova from 'vue-cordova' import router from './router' import store from './store' import LoginPage from './components/LoginPage' import TabsPage from './components/TabsPage' import CalendarPage from './components/CalendarPage' import EventsPage from './components/EventsPage' import PtoPage from './components/PtoPage' import SettingsPage from './components/SettingsPage'

// See https://github.com/dkfbasel/vuex-i18n for usage. import vuexI18n from 'vuex-i18n'

// Edit the .json files to provide translations //import as en from './lang/en.json' //import as es from './lang/es.json'

// jQuery (necessary for Bootstrap's JavaScript plugins) require('jquery/dist/jquery.min') require('tether/dist/js/tether.min') require('bootstrap/dist/js/bootstrap.min')

// We have to include the bmg.min.css file here because otherwise it doesn't get // bundled properly with the other css and Firebase Hosting serves it up as HTML // instead of css! require('./assets/css/pto.min.css')

Vue.use( VueCordova, { optionTestKey: 'optionTestValue' } ) Vue.use(vuexI18n.plugin) // <<<<----- ERROR is caused by this. When I comment this line out, no errors! Vue.use(store)

Vue.config.productionTip = false

// add translations directly to the application //Vue.i18n.add('en', en) //Vue.i18n.add('es', es)

// set the start locale to use //Vue.i18n.set('en')

// add cordova.js only if serving the app through file:// if ('file:' === window.location.protocol || '3000' === window.location.port) { var cordovaScript = document.createElement('script') cordovaScript.setAttribute('type', 'text/javascript') cordovaScript.setAttribute('src', 'cordova.js') document.body.appendChild(cordovaScript) }

/ eslint-disable no-new / new Vue({ el: '#app', template: '', components: { App, LoginPage, TabsPage, CalendarPage, EventsPage, PtoPage, SettingsPage }, data: function () { return { cordova: Vue.cordova } }, store, router }) `

[tikiatua]

Hi @aaronpatty

The unexpected token export is usually due to es2015 code not being compiled. By default the vuex-i18n package is in es2015 code. To use the transpiled javascript code use import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js';

P.S. This is mentioned in the readme – maybe still not clearly enough.

[aaronpatty]

Thanks for the quick response @tikiatua. I just tried using import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js' as you suggested and I received the following error at runtime:

vuex-i18n.umd.js?f89e:386 Uncaught TypeError: Cannot read property 'registerModule' of undefined at Object.install (eval at (app.js:3139), :386:8) at Function.Vue.use (eval at (app.js:672), :4681:22) at eval (eval at (app.js:2436), :72:15) at Object. (app.js:2436) at webpack_require (app.js:556) at fn (app.js:87) at Object. (app.js:587) at webpack_require (app.js:556) at app.js:579 at app.js:582

[aaronpatty]

I figured out the problem. I needed to have Vue.use(vuexI18n.plugin, store) instead of having them separated into different Vue.use() calls.

Thanks @tikiatua!

[tikiatua]

Thank you for the clarification, great that you found a solution.

As a small tipp: Vue-cordova will use webpack internally to compile all the javascript and vue files using babel.

Now, to make the webpack build process fast, the node_modules folder is excluded from compilation – see the file vue-cordova-demo/build/webpack.base.conf.js on line 41 and 47.

To include vuex-i18n in the compilation step, you should add an additional include property like this include: [path.resolve(__dirname, '../node_modules/vuex-i18n')]

This will tell webpack to also compile the vuex-i18n module and integrate it fully into the webpack processing pipeline.

[GeniaT]

@tikiatua It's maybe worth mentioning in the README when using the package in tests, transpiled version is also needed.