Vue-loader: Issue with babel-loader and babelrc file

[sqal]

I am not sure 100% if it is vue-loader issue but it's definitely related to .vuesingle file components so I am going to search for help here. What's the problem. Take official webpack-simple-2.0 template as an example. In my project i have configured babel-loader like this:

{
  test: /\.js$/,
  loader: 'babel',
  exclude: /node_modules/,
  query: {
    babelrc: false,
    presets: [
      ['es2015', { modules: false }]
    ]
  }
}

and don't have .babelrc configuration file in project's root directory. So now when i run build command i get this error:

ERROR in build.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [build.js:5572,6]

This error occurs because UglifyJs can't minify ES6 syntax. But, strangely there in no error while building app when I don't use ES6 syntax inside .vue files. What's happening here? What I need to have .babelrc file with defined presets to get it work? Why defining babel options inside loader's query doesn't work for .vue files?

[yyx990803]

Don't use query, use .babelrc. Your loader query only applies to the files matched by /\.js$/ so they won't apply to vue files.

[xpepermint]

@yyx990803 is there a workaround for use with query? Sometimes I have two transpiling strategies in the same project (client, server) thus passing options to the vue-loader would be helpful.

[JeffreyWay]

Yeah - is there any way at all to not use the .bablerc file? Sounds silly, but for a thing I'm working on, I'd love it if folks didn't have to manually create that file.

[yyx990803]

Something alone the lines of:

vue: {
  loaders: {
    js: 'babel?' + JSON.stringify(babelConfig)
  }
}

[yyx990803]

@xpepermint for separate configs inside .babelrc you can use its env option: https://babeljs.io/docs/usage/babelrc/#env-option

[nicolasxu]

My babelrc file is in different location. transform-runtime plugin can't be found.

[nicolasxu]

where shall I put "babelrc": false mentioned in https://babeljs.io/docs/usage/babelrc/#env-option ?

[nicolasxu]

My source code is in a sibling directory with webpack config code which contains node_modules for dev-depencencies. If I place .babelrc in the root of my src folder. Babel can't find the preset and babel plugin, since node_modules doesn't exist in src folder. How should I specify .babelrc file location in vue-loader? or disable babelrc completely? It is really anoying assumption.

[nicolasxu]

I tried

        webpackConfigObj.vue = {
            loaders: {
                // css: utils.cssLoaders({
                //     sourceMap: false,
                //     extract: true}),
                js: 'babel?' + JSON.stringify({
                        "presets": ["es2015", "stage-2"],
                        "plugins": ["transform-runtime"],
                        "comments": false,
                        "babel": false
                        }), 
                scss: 'vue-style-loader!css!postcss-loader!sass',
                // js: 'babel'
            }
        }; // this will overide previous data   

vue-loader is still loading looking for .babelrc file in the upstream folder of my source code. If vue-loader locates the babelrc, then it can't find the preset modules and plugin, since node_modules folder are not there.

[nicolasxu]

I got error for above code:
Unknown plugin "transform-runtime".
Why babel can't find the plugins and presets? My plugins are not in the same folder of src files. The result is the same as I put .babelrc file in src folder. How to fix it?

[nicolasxu]

The problem is clear: babel always trying to resolve plugins in my source code folder, no matter I use .babelrc or Strnify.JSON object. How could I change this default behavior?

[MatteoGabriele]

This issue is closed due to new features in Webpack 2, which is not a stable release yet.
I can't get it work without a babelrc file. Any chance that someone has a fix for Webpack 1 ?

[MatteoGabriele]

I have found a workaround that works for me without using the .babelrc file.

const combineLoaders = require('webpack-combine-loaders')
const bebelOptions = {
  presets: ['es2015', 'stage-2'],
  plugins: ['transform-runtime']
}

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: babelOptions
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  vue: {
    loaders: {
      js: combineLoaders([
        {
          loader: 'babel-loader',
          query: babelOptions
        }
      ])
    }
  }
}

[gigony]

vue: {
    loaders: {
      js: "babel-loader?presets[]=es2015,presets[]=stage-2"
    }
  }

Above worked for me.
Requires babel-preset-es2015 and babel-preset-stage-2