` __webpack_require__(...) is not a function` when using babel 6

Question

Everything seems to build fine: http://d.pr/i/1aZxR with the following configs.

However, when I run the code I get the following error this (via webpack-dev-server):

Uncaught TypeError: __webpack_require__(...) is not a function(anonymous function) @ login.js:4__webpack_require__ @ bootstrap 38790ff45722f55eb700?6a08:50(anonymous function) @ bootstrap.js:2363__webpack_require__ @ bootstrap 38790ff45722f55eb700?6a08:50(anonymous function) @ app.38790ff45722f55eb700.js:29__webpack_require__ @ bootstrap 38790ff45722f55eb700?6a08:50webpackJsonpCallback @ bootstrap 38790ff45722f55eb700?6a08:21(anonymous function) @ app.38790ff45722f55eb700.js:1 angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.4.7/$injector/nomod?p0=app     at http://localhost:3000/vendor.js:193:13     at http://localhost:3000/vendor.js:2111:18     at ensure (http://localhost:3000/vendor.js:2035:39)     at module (http://localhost:3000/vendor.js:2109:15)     at http://localhost:3000/vendor.js:4515:23     at forEach (http://localhost:3000/vendor.js:461:21)     at loadModules (http://localhost:3000/vendor.js:4499:6)     at createInjector (http://localhost:3000/vendor.js:4424:12)     at doBootstrap (http://localhost:3000/vendor.js:1782:21)     at bootstrap (http://localhost:3000/vendor.js:1803:13) http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=app&p1=Error%3A%20%…%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A3000%2Fvendor.js%3A1803%3A13)(anonymous function) @ angular.js:68(anonymous function) @ angular.js:4413forEach @ angular.js:336loadModules @ angular.js:4374createInjector @ angular.js:4299doBootstrap @ angular.js:1657bootstrap @ angular.js:1678angularInit @ angular.js:1572(anonymous function) @ angular.js:28899fire @ jquery.js:3099self.fireWith @ jquery.js:3211jQuery.extend.ready @ jquery.js:3417completed @ jquery.js:3433 

I think babel is interfering with __webpack_require__ in some way but I'm not sure. I did try using different transforms/plugins but I wasn't able to find a solution.

.babelrc:

{   "plugins":[     "transform-runtime",     "transform-node-env-inline"   ],   "presets":[     "stage-0",     "es2015"   ] } 

here's my webpack.config.js:

var Clean = require('clean-webpack-plugin'); var CompressionPlugin = require("compression-webpack-plugin"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require('html-webpack-plugin'); var fs = require('fs'); var ngAnnotatePlugin = require('ng-annotate-webpack-plugin'); var path = require('path'); var StatsPlugin = require('stats-webpack-plugin'); var webpack = require('webpack');  //CONSTANTS  var NODE_ENV = process.env.NODE_ENV; var IS_DEV = NODE_ENV === 'development'; var babelFile = fs.readFileSync('./.babelrc', 'utf8'); var BABELRC = JSON.parse(babelFile); var cleanFonts = function(){   return new Clean(['dist/tmp/*.{ttf,eot,svg,woff}']); } var cleanImages = function(){   return new Clean(['dist/tmp/*.{png,jpg}']); } var cleanJs = function(){   return new Clean(['dist/*.{js,map}']); } var plugins = [   new webpack.NoErrorsPlugin(),   cleanJs(),   // new StatsPlugin('stats.json', {chunkModules: true}),   new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","window.jQuery": "jquery" }),   new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),   new HtmlWebpackPlugin({     template: 'client/app/vendors/assets/index-tmpl.html',     filename: 'index.html'   }),   new webpack.optimize.CommonsChunkPlugin({     name: 'vendor',     filename: 'vendor.js',     chunks:['customer','personalOrganization','app']   })   // new ngAnnotatePlugin({add: true})   // new ExtractTextPlugin("style.[hash].css", {   //    disable: false,   //    allChunks: true   // }),    //new webpack.optimize.CommonsChunkPlugin({minChunks: 2, children: true, async: true}),   // new CompressionPlugin({asset: "{file}.gz", algorithm: "gzip", regExp: /\.js$|\.html$/, threshold: 10240, minRatio: 0.8 }) ]; var dev_plugins = [ ] var prod_plugins = [   cleanFonts(),   cleanImages(),   new webpack.optimize.UglifyJsPlugin({     minimize: true,     sourceMap: false,     compress: { warnings: false },     mangle: false   }),   new webpack.optimize.DedupePlugin(),   new webpack.optimize.AggressiveMergingPlugin() ]; if(NODE_ENV !== 'development'){   plugins = plugins.concat(prod_plugins); } else{   plugins = plugins.concat(dev_plugins); } babelLoaderOpts = {   cacheDirectory: true }; Object.assign(babelLoaderOpts, BABELRC); module.exports = {   cache: IS_DEV,   // watch: IS_DEV,   devtool: 'source-map',   entry: {     "app": "./client/app/app.js",     "devserver": 'webpack-dev-server/client?http://localhost:3000'   },   output: {       path: __dirname + "/dist",       filename: '[name].[hash].js'   },   module: {         noParse: [           /moment.js/         ],         loaders: [             { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },             {               test: /\.js$/,               exclude: /(node_modules|bower_components|vendors)/,               loader: 'babel',               query: babelLoaderOpts             },             { test: /\.html$/, loader: 'raw' },             { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded"+"&includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")},             { test: /\.css$/,  loader: 'style!css' },             { test: /\.(png|jpeg|jpg|gif)$/, loader: 'url-loader?limit=30000&name=tmp/[name].[ext]&no_emit_env=development'},             { test: /\.woff(\?\S*)?$/,  loader : 'url?prefix=font/&limit=10000&mimetype=application/font-woff&name=tmp/[name].[ext]&no_emit_env=development'},             { test: /\.woff2/, loader: 'url?prefix=font/&limit=100000&mimetype=application/font-woff2&name=tmp/[name].[ext]&no_emit_env=development' },             { test: /\.ttf/,   loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},             { test: /\.eot/,   loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},             { test: /\.svg/,loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},             //{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&&includePaths[]='+ path.resolve(__dirname, './node_modules/compass-mixins/lib')) },             //{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }       ]   },   devServer: {     contentBase: './client/app'   },   resolve: {       modulesDirectories: ['vendors','node_modules', 'bower_components'],       extensions: ['', '.js', '.json']   },   plugins: plugins }; 

Answer 1

I'd like to add another reason why this error might pop up:

I did the following:

import mapActions from 'vuex' 

instead of:

import { mapActions } from 'vuex' 

The former was importing the entire vuex export, which is an object. Adding object destructuring fixed the problem.