vue.js with vue-multilanguage My webpack compilate is not translated right - node.js

Question

My webpack compilate is not transpiled into the right JS. It writes
exports default MultiLanguage
instead of
module.exports = { MultiLanguage: MultiLanguage};
My .bablerc
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
My package.json
{
"name": "myapp",
"version": "0.0.1",
"description": "My app",
"dependencies": {
"bootstrap": "^3.3.7",
"vue": "^2.4.2",
"vue-multilanguage": "^2.1.1"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"webpack": "^1.15.0"
},
"author": "You"
}
My webpack.config.js
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}
]
}
}
And therefor the error and the code where it hits in the build.js
in Chromium/Chrome und ubuntu:
Uncaught SyntaxError: Unexpected token export
in Firefox:
SyntaxError: export declarations may only appear at top level of a module
export default MultiLanguage
Here also the vue code (main.js):
import Vue from 'vue/dist/vue.js'
import MultiLanguage from 'vue-multilanguage/src/vue-multilanguage.js'
Vue.use(MultiLanguage, {
default: 'en',
en: {
hi: 'Hello',
welcome: 'Welcome, {name}'
},
pt: {
hi: 'Ola',
welcome: 'Bem-vindo, {name}'
}
})
any recommanded tutorials? any idea?
when I replace the line in build.js wit module.exports = { MultiLanguage: MultiLanguage}; the error does not occure

Answer 1

Your problem is linked to your import.
vue-multilanguage.js is not provided pre-compiled by its author (which is rare, usually libraries include a dist file ready to be used...) and as it is in your node_modules folder, it is not transformed from ES6 to ES5 by your babel loader as well. You need to add an exception in your webpack.config.js.
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
// exclude everything from node_modules, except vue-multilanguage
exclude: /node_modules(?![\\/]vue-multilanguage[\\/])/
}
]
}
}
Not directly related, but not that I also replaced 'babel' by 'babel-loader', to avoid some bugs with older packages. See here.
Also, you can (and you probably should), as mentioned in the comments, import vue this way.
import Vue from 'vue';
Side note:
According to their package.json, there should be a file ready to be used in their library, located at dist/vue-multilanguage.js. But they oddly added their dist folder into their .npmignore file, and so it's not included. That's probably an error. I'll post an issue on their github. Once it's corrected, and if you update your package, you should be able to simply import vue-multi like this (without adding any exception to your webpack config):
import MultiLanguage from 'vue-multilanguage'

Answer 2

I would use next imports:
import Vue from './vue';
import MultiLanguage from './vue-multilanguage';