I'm using the following components:
If I use a webpack config like this
module.exports = {
context: __dirname + "/JsSrc",
entry: "./main.js",
output: {
path: __dirname + "/Content",
filename: "bundle.js"
},
resolve: {
extensions: ['', '.vue']
},
module: {
loaders: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{
test: /\.vue$/,
loader: 'vue',
exclude: /(node_modules|bower_components)/,
query: {
presets: ['es2015']
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
}
};
The module resolution works fine in normal js files (since they have the es2015 preset), but any import'ed modules in a .Vue file will throw an Unexpected token import error, namely because the import token in the .Vue files isn't being converted to require. If I add this into my webpack config:
vue: {
loaders: {
js: 'babel?presets[]=es2015'
}
}
This error is gone. Surely we should be using es2015 by default? Or failing this, provide a more accessible and better documented mechanism for setting the babel defaults for the vue loader?
I'm using the following components:
If I use a webpack config like this
The module resolution works fine in normal js files (since they have the es2015 preset), but any
import'ed modules in a .Vue file will throw anUnexpected token importerror, namely because theimporttoken in the .Vue files isn't being converted torequire. If I add this into my webpack config:This error is gone. Surely we should be using es2015 by default? Or failing this, provide a more accessible and better documented mechanism for setting the babel defaults for the vue loader?