Datsik Datsik - 1 month ago 22
Javascript Question

Can't seem to get babel and webpack to work for ES2015, getting import error

My

webpack.config.js
is this:

const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: [
'babel-polyfill',
'./app/main.js'
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'build.js'
},
module: {
loaders: [
{
test: '/\.vue$/',
loader: 'vue'
},
{
test: '/\.js$/',
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new webpack.ExternalsPlugin('commonjs', [
'electron'
])
]
}


my
.babelrc
is this

{
"presets": ["es2015"],
"plugins": ["transform-runtime"]
}


my
./app/main.js
is this

import vue from 'vue';
import App from './views/App.vue';

new vue({
el: 'body',
components: { App }
});


my
package.json
dependencies are this

"dependencies": {
"babel-polyfill": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-register": "^6.18.0",
"babel-runtime": "^5.8.38",
"jquery": "^3.1.1",
"vue": "^2.0.3"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"babel-runtime": "^5.8.38",
"css-loader": "^0.25.0",
"electron-prebuilt": "^1.4.5",
"vue-hot-reload-api": "^2.0.6",
"vue-html-loader": "^1.2.3",
"vue-loader": "^9.7.0",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}


But when I try to launch my Electron program, I get this error in the console:

Uncaught SyntaxError: Unexpected token import


Which points to
Line 1
of
./app/main.js


I've tried changing the loader to
babel
instead of
babel-loader
and I've tried a bunch of different presets, all the links are purple on the first 3 pages of google but most of them point to the same fix usually people forgetting
babel-preset-es2015
but I have done that. Any help would be great

Running Node Version 6.9.1 and NPM Version 3.10.8

enter image description here

Answer

Your loader test parameters are strings, not regular expressions. Therefore the JavaScript files never match these loaders (since a string test will be interpreted as an absolute path to compare to), and the files are never processed with Babel to begin with.

Just update your loaders to this, and Webpack should be working correctly:

loaders: [
  {
    test: /\.vue$/, // note no quotes
    loader: 'vue'
  },
  {
    test: /\.js$/,  // note no quotes
    loader: 'babel-loader',
    exclude: /node_modules/
  }
]
Comments