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

Question

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

Answer 1

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/
  }
]