Automatically generated Webpack config failing - reactjs

Question

My project is running a VERY old version of React and I would like to drag it into 16. I went through the "best practice" tutorial on how to get 16 up and running and ended up with these two machine generated files,
package.json
{
"name": "asset_iq",
"version": "1.0.0",
"description": "New application for the old dealer net",
"main": "bundle.js",
"directories": {
"doc": "docs",
"test": "test"
},
"scripts": {
"start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js"
},
"keywords": [
"React",
"Redux",
"ES6"
],
"author": "Mark Addinall",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react-hot-loader": "^3.1.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"axios": "^0.17.1",
"lodash": "^4.17.4",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2",
"redux-form": "^7.2.0",
"redux-promise": "^0.5.3"
}
}
and webpack.config.js
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8888',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
};
Now I have been using react and webpack for about a year, but on a version from the dark past. React 0.x! This looked reasonable to me, however,
npm start
> asset_iq#1.0.0 start /disk/dev/www/fastrack-react16/app/client
> webpack-dev-server --progress --colors --hot --config ./webpack.config.js
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
10% building modules 6/11 modules 5 active ...track-react16/app/client/src/index.js/disk/dev/www/fastrack-react16/app/client/node_modules/loader-runner/lib/loadLoader.js:35
throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
^
The curious thing is the fact that it is trying to run the project on 8080 which IS in use so I think this is the start of the LIFECYCLE exception. Not sure why it is failing to start on 8888. I solved that by adding it in the devServer object at the end of the config file, however it is still failing with the same error.

Answer 1

Try to use the configuration of react-hot-loader in your webpack like this:
{
test: /\.(js|jsx)$/,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
plugins: [
'react-hot-loader/babel'
]
}
}
Hope it helps :)