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

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

I've never used the element property syntax that you are using before. That could be causing your error. Have you checked the console? I can just about bet that vue is having problem rendering your template because of the v.lang.welcome property. I don't think that is proper html5. — Miguel Coder
– Miguel Coder, Commented Jul 30, 2017 at 10:38
I would recommend looking for another tutorial because the syntax you are using looks unlike anything I have ever seen. — Miguel Coder
– Miguel Coder, Commented Jul 30, 2017 at 10:49
@MiguelCabrera the syntax looks good according to: github.com/leonardovilarinho/vue-multilanguage (the tutorial of the makers of the module) — helle
– helle, Commented Jul 30, 2017 at 15:11
You could be right, but I've been writing code exclusively in Vue2 for over a year and I've never seen the import Vue from 'vue/dist/vue.js', usually I just import Vue from 'vue' — Miguel Coder
– Miguel Coder, Commented Jul 31, 2017 at 3:36

FitzFish · Accepted Answer · 2017-08-02 08:38:43Z

1

+50

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'

edited Aug 2, 2017 at 8:38

answered Aug 2, 2017 at 8:09

FitzFish

8,6193 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

helle Over a year ago

Thanks for the Answer. I cannot import vue without the path. Why? And I changed the exlude part and still have the plain ES6 export in my build.js. any idea, do you need any information?

helle Over a year ago

And when I replace the line again I get an other error: build.js:619 [Vue warn]: Failed to resolve directive: lang

FitzFish Over a year ago

I hosted on github a minimal working version, see if there is any difference with yours: github.com/cobaltway/vue-multi-integration

helle Over a year ago

I had no Time to check your solution so far. As the bounty would have run out tomorow, I award your great help anyway today.

sancelot · Accepted Answer · 2017-08-02 23:28:59Z

0

I would use next imports:

import Vue from './vue';
import MultiLanguage from './vue-multilanguage';

answered Aug 2, 2017 at 23:28

sancelot

2,07414 silver badges33 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related