We Keep Coding

(Upgrading Webpack 3 > 4) Error: ENOENT: no such file or directory 'node_modules\ieee754\index.js'

I'm upgrading from Webpack 3 > 4 and am currently experiencing the following issue when loading a simple page that previously worked without issue:
Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\Data\%MYPROJECTDIRECTORY%\node_modules\ieee754\index.js'.
The webpack -w watch files command seems to bundle them without issue. I don't get any other console errors, although there are a few peer dependency issues that i am warned of when doing an npm install, none of them are being used in this particular component I am seeking to render to test the overall upgrade success.
Here are some of my files:
//Webpack.config.js
module.exports = {
entry: [
'babel-polyfill',
'./Scripts/App.js',
],
output: {
filename: 'Scripts/ReactBundle/bundle.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query:
{
presets: ['react', 'es2017', 'es2015', 'stage-2'],
plugins: ['transform-class-properties']
}
},
]
},
optimization: {
removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false,
}
}
//this was in my Webpack v3 config, but I've removed it for testing.
//resolve: {
// modules: [
// "node_modules"
// ],
// extensions: ['.Webpack.js', '.web.js', '.js', '.jsx'],
// mainFields: ["main"]
//},
and
//package.json
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"scripts": {
"webpack": "webpack --config Webpack.config.js -w"
},
"dependencies": {
"autosuggest-highlight": "^3.1.1",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"fast-clone": "^1.5.3",
"fast-levenshtein": "^2.0.6",
"ieee754": "^1.1.12",
"material-ui": "1.0.0-beta.30",
"material-ui-icons": "1.0.0-beta.17",
"npx": "^10.2.0",
"prop-types": "^15.6.1",
"react": "^16.7.0",
"react-alert": "^4.0.4",
"react-alert-template-basic": "^1.0.0",
"react-autosuggest": "^9.3.2",
"react-bootstrap-typeahead": "^3.2.4",
"react-datepicker": "^2.0.0",
"react-dom": "^16.7.0",
"react-draggable": "^3.0.4",
"react-dropzone": "^4.2.3",
"react-pdf-js": "^3.0.4",
"react-redux": "^5.0.7",
"react-resizable": "^1.7.5",
"react-table": "^6.8.0",
"react-tooltip": "^3.4.1",
"react-transition-group": "^2.5.3",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-thunk": "^2.2.0",
"stable": "^0.1.8",
"style-loader": "^0.20.3",
"typeface-roboto": "0.0.45",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"redux-devtools": "^3.4.1"
}
}
I've had limited success researching this issue, but attempted to install the package ieee754 both globally and locally to no success. I suspect something that was part of my previous config for webpack 3 is screwing up some new defaults in Webpack 4. Any help is much appreciated!

Bootstrap 3.3.x as a Development Dependancy

I have a quick question. I just took over a React Boilerplate project. It uses Material UI && Bootstrap. But bootstrap is only added as a development dependency. How will the boilerplate behave/work in production mode? I don't see how.
Package.json:
"devDependencies": {
"babel-core": "^6.4.5",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.0.1",
"babel-preset-stage-0": "^6.3.13",
"bootstrap": "^3.3.5",
"bootstrap-loader": "^1.2.0-beta.1",
"bootstrap-sass": "^3.3.6",
"bootstrap-webpack": "0.0.5",
"eslint": "^3.4.0",
"eslint-config-airbnb": "13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^3.0.1",
"eslint-plugin-react": "^6.1.2",
"webpack": "^1.12.11",
"webpack-dev-middleware": "^1.5.0",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.6.0",
"webpack-merge": "^1.0.2"
},
"dependencies": {
"autoprefixer": "6.5.3",
"axios": "^0.15.3",
"classnames": "^2.2.3",
"css-loader": "^0.26.1",
"csswring": "^5.1.0",
"deep-equal": "^1.0.1",
"expect": "^1.13.4",
"exports-loader": "^0.6.2",
"expose-loader": "^0.7.1",
"express": "^4.13.4",
"express-open-in-editor": "^1.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"gapi": "0.0.3",
"history": "^4.4.1",
"http-proxy": "^1.12.0",
"imports-loader": "^0.6.5",
"jasmine-core": "^2.4.1",
"jquery": "^3.1.0",
"jwt-decode": "^2.1.0",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.1.1",
"karma-webpack": "^1.7.0",
"less": "^2.5.3",
"less-loader": "^2.2.2",
"lodash": "^4.5.1",
"material-ui": "^0.20.2",
"material-ui-upload": "^1.2.1",
"mocha": "^3.0.2",
"morgan": "^1.6.1",
"node-sass": "^4.9.3",
"postcss-import": "^9.0.0",
"postcss-loader": "^1.1.1",
"q": "^1.4.1",
"qs": "^6.1.0",
"rc-datepicker": "^4.0.1",
"react": "^15.3.1",
"react-addons-css-transition-group": "^15.3.1",
"react-calendar-component": "^1.0.0",
"react-date-picker": "^5.3.28",
"react-datepicker": "^0.37.0",
"react-document-meta": "^2.0.0-rc2",
"react-dom": "^15.1.0",
"react-dropzone": "^5.1.0",
"react-forms": "^2.0.0-beta33",
"react-hot-loader": "^1.3.0",
"react-loading-order-with-animation": "^1.0.0",
"react-onclickoutside": "^5.3.3",
"react-redux": "^4.3.0",
"react-router": "3.0.0",
"react-router-redux": "^4.0.0",
"react-tap-event-plugin": "^2.0.1",
"react-transform-hmr": "^1.0.1",
"redux": "^3.2.1",
"redux-form": "^6.0.1",
"redux-logger": "2.7.4",
"redux-thunk": "^2.1.0",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"yargs": "^6.5.0"
}
From bootstrap, we use mainly the grid and pull commands, for buttons. I don't get it though. Also, this is quite the complicated and old boilerplate.
Also another thing is that my scss doesn't get applied whatever method I use.. Inline, scss, css. I don't get it though. His webpack config is way too complicated, and I don't get it. Can someone help me.
Here is the webpack for Development:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'webpack-hot-middleware/client',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
},{
test: /\.css$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
}),
],
};
The webpack for Production:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: ['bootstrap-loader/extractStyles'],
output: {
publicPath: 'dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!postcss-loader!sass',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
],
};
The common one:
const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-import');
const merge = require('webpack-merge');
const development = require('./dev.config');
const production = require('./prod.config');
require('babel-polyfill').default;
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '../src'),
build: path.join(__dirname, '../dist'),
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: [
PATHS.app,
],
output: {
path: PATHS.build,
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.jsx', '.js', '.json', '.scss', '.css'],
modulesDirectories: ['node_modules', PATHS.app],
},
module: {
loaders: [{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports?jQuery=jquery',
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff',
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff2',
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream',
}, {
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-otf',
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file',
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml',
}, {
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/,
}, {
test: /\.png$/,
loader: 'file?name=[name].[ext]',
}, {
test: /\.jpg$/,
loader: 'file?name=[name].[ext]',
}],
},
postcss: (webpack) => (
[
autoprefixer({
browsers: ['last 2 versions'],
}),
postcssImport({
addDependencyTo: webpack,
}),
]
),
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(development, common);
}
if (TARGET === 'build' || !TARGET) {
module.exports = merge(production, common);
}
If you could help me understand this. And also answer my question would be great thank you!!

Webpack generates a bundle.min.js file per image

I have a React project with a lot of images and Webpack2 configuration. Whenever I build my project it generates one bundle file per image - which results in about 140 bundle.min.js files:
I've been searching like a fanatic to find out why or if there is a better way to do this (it would be wonderful if i could just have one file for all these - if possible?). Here is my code:
webpack.config.prod.js
// PRODUCTION
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const entry = {
app: path.join(process.cwd(), 'src/app.js')
}
const output = {
path: path.join(__dirname, 'dist'),
filename: 'bundle.min.js',
}
const plugins = [
new webpack.DefinePlugin({
// 'process.env.NODE_ENV': JSON.stringify('production')
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
mangle: false,
compress: {
warnings: false
}
}),
new ExtractTextPlugin('bundle.css'), // creation of HTML files to serve your webpack bundles
new HtmlWebpackPlugin({
template: 'index-template.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'bundle',
filename: '[name].common.js'
})
]
const config = {
context: path.join(__dirname, 'src'),
entry: entry,
output: output,
devtool: "source-map",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
use: "babel-loader"
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: { limit: 10000, name: './images/[name].[ext]' } // Convert images < 10k to base64 strings (all in images folder)
}]
},
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [ require('autoprefixer')() ]
}
},
'sass-loader',
]
})
}
]
},
plugins: plugins,
externals: {
jquery: 'jQuery'
}
}
module.exports = config;
package.json
{
"name": "magdenmagden",
"version": "1.0.0",
"description": "A webbased art gallery",
"main": "index.js",
"author": "fransBernhard <mimilundberg#fransbernhard.se>",
"license": "ISC",
"scripts": {
"start": "NODE_ENV=development node dev-server.js --history-api-fallback",
"build": "rimraf dist && NODE_ENV=production webpack --config webpack.config.prod.js",
"test": "rimraf jest/__snapshots__ coverage && jest --no-cache --coverage"
},
"jest": {
"transform": {
"^.+\\.(js|jsx$)": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/jest/config/styleTransform.js",
"^.+\\.(jpg|jpeg|png|gif)$": "<rootDir>/jest/config/fileTransform.js"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleNameMapper": {
".*\\.scss$": "<rootDir>/jest/config/styleTransform.js"
}
},
"dependencies": {
"axios": "^0.16.2",
"backstopjs": "^2.7.5",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-jest": "^20.0.3",
"babel-loader": "^7.0.0",
"babel-plugin-dynamic-import-node": "^1.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.2",
"eslint": "^3.19.0",
"eslint-config-react-app": "^1.0.4",
"eslint-loader": "^1.7.1",
"eslint-plugin-flowtype": "^2.34.0",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"json-loader": "^0.5.4",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.5",
"prop-types": "^15.5.10",
"react-hot-loader": "^3.0.0-beta.7",
"react-modal": "^1.7.7",
"react-router": "^3.0.5",
"react-router-dom": "^4.1.1",
"react-scrollchor": "^3.0.0",
"react-test-renderer": "^15.5.4",
"rimraf": "^2.6.1",
"sass-loader": "^6.0.5",
"screener-storybook": "^0.7.10",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
}
}
So effing greatful for any input!

Webpack SCSS - Wrong file and line in sourcemap

sourcemaps lists the wrong file and line
Example:
if i have class .example in my SCSS file in line 8, sourcemaps will list it in line 3246
clicking on the source in the dev tools redirects you to line 8 in the SCSS file where u can see the class isn't listed there
checking the CSS file u see .example in line 3246.
Things i tried:
Changing devtool to either source-map or inline-source-map
Adding sourceMap query to resolve-url-loader
Removing ExtractTextPlugin
Webpack Config:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
module.exports = {
devtool: 'eval',
debug: true,
entry: {
app: path.resolve(__dirname, './site/js/app.js'),
vendor: path.resolve(__dirname, './site/js/vendor.js')
},
output: {
path: path.resolve(__dirname, './site/dist'),
publicPath: '/dist/',
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
module: {
loaders: [
{ //Handle HTML Templates
test: /\.html$/,
exclude: /partials/,
loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './site')) + '/!html'
}, { //Handle HTML Partials
test: /\.html$/,
include: /partials/,
loader: 'ng-cache?prefix=partials'
}, { //Handle Images
test: /\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=images/[name].[hash].[ext]',
'image-webpack'
]
} , { //Handle Fonts
test: /\.(eot|otf|ttf|woff|woff2)$/i,
loader: 'file?hash=sha512&digest=hex&name=fonts/[name].[hash].[ext]'
} , { //Handle SCSS
test: /\.scss/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap")
}
]
},
htmlLoader: {
ignoreCustomFragments: [/\{\{.*?}}/],
root: path.resolve(__dirname, './site/'),
attrs: ['img:src', 'img:ng-src']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor'],
minChunks: Infinity
}),
new ExtractTextPlugin("[name].css"),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './site/templates/index.ejs'),
filename: path.resolve(__dirname, './views/home.ejs'),
minify: {
removeComments: true
}
}),
new ScriptExtHtmlWebpackPlugin({
defer: [/app/, /vendor/],
defaultAttribute: 'async'
})
]
};
package.json
"dependencies": {
...
},
"devDependencies": {
"angular-mocks": "^1.5.8",
"autoprefixer": "^6.5.3",
"chai": "3.5.0",
"colors": "1.0.3",
"concurrently": "^2.2.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-batch": "^1.0.5",
"gulp-sass": "^2.3.1",
"gulp-sass-lint": "^1.2.0",
"gulp-sourcemaps": "^1.6.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"image-webpack-loader": "^2.0.0",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "3.1.0",
"ng-annotate-webpack-plugin": "^0.1.3",
"ng-cache-loader": "0.0.21",
"ngtemplate-loader": "^1.3.1",
"node-sass": "^3.13.0",
"nodemon": "1.2.1",
"postcss-loader": "^1.2.0",
"resolve-url-loader": "^1.6.0",
"rimraf": "^2.5.4",
"sass-loader": "^4.0.2",
"sassdoc": "^2.1.20",
"script-ext-html-webpack-plugin": "^1.3.0",
"strip-loader": "^0.1.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-merge": "^0.14.1"
}

[Babel]: Unknown option: foreign.Children

I'm getting that error when I build using this script:
webpack --colors --progress --watch --config --jsx-loader webpack.config.js
Here's my package.json file:
{
"dependencies": {
"autoprefixer": "^6.0.3",
"node-libs-browser": "^0.5.3",
"object-assign": "4.0.1",
"underscore": "1.8.3",
"react": "0.14.7",
"react-dom": "0.14.7",
"react-router": "2.0.0",
"history": "^1.17.0",
"superagent": "^1.8.0",
"react-addons-css-transition-group": "0.14.7",
"react-bootstrap": "0.28.2",
"react-select": "^1.0.0-beta9",
"moment": "2.11.2",
"truncate": "2.0.0",
"superagent-promise-plugin": "2.1.0",
"rrule": "2.1.0"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.23.1",
"eslint": "^3.2.2",
"eslint-config-defaults": "^9.0.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^6.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"isparta-instrumenter-loader": "^1.0.1",
"jsx-loader": "0.13.2",
"less": "^2.3.1",
"less-loader": "^2.2.3",
"livereload": "^0.5.0",
"null-loader": "^0.1.1",
"postcss-loader": "^0.9.1",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"webpack": "^1.12.13",
"webpack-livereload-plugin": "0.4.0"
},
"babel": {
"presets": [
"stage-0",
"es2015",
"react"
]
}
}
And my webpack.config.js
var webpack = require('webpack');
var path = require('path');
var LiveReloadPlugin = require('webpack-livereload-plugin')
module.exports = {
output: {
path: __dirname,
filename: "bundle.js",
},
resolve: {
extensions: ['', '.js', '.jsx'],
root: [
path.resolve('./../../../../../../Javascripts/modules')
],
moduleDirectories:
[
'./../../../../../../Javascripts/modules'
]
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{
test: /\.less$/,
loader: "style!css!less"
},
{ test: /\.html$/, loader: 'raw', exclude: [/node_modules/, path.resolve('./../../../../../../Javascripts/modules')] },
{
test: /(\.jsx|\.js)$/,
loader: 'babel',
exclude: [/(node_modules|bower_components)/]
},
{
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: [/node_modules/, path.resolve('./../../../../../../Javascripts/modules')]
}
]
},
eslint: {
configFile: './src/js/.eslintrc'
},
entry: "./src/index.js",
plugins: [
new LiveReloadPlugin()
]
};
Any idea how to resolve that error? Based on my Google searches, it's a package versioning issue, but that's all I've been able to figure out.

You might be missing the react babel presets npm package.
Try this:
npm i --save-dev babel-preset-react

I ended up rolling back to Babel 5, and this issue went away. Not a great answer for those who might find this later on, but it works fine for my app.