ERROR in multi (webpack)-dev-server/client

Question

I'm new to webpack / reactjs, just follow the tutorial here: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

Then after I 'npm start', I got error:

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js
Module not found: Error: Can't resolve 'babel' in '/var/www/jay/reactjs/react-app'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'babel-loader' instead of 'babel'.
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js

Any ideas?

Answer 1

Error in angular dependencies. It may be with renaming files or folders in angular.json

Answer 2

The tutorial you are following uses Webpack 1, but you are now using Webpack 2 which has some breaking changes. The error tells you that you can no longer omit -loader when specifying your loaders. All you need to do is replace

loader: 'babel'

with

loader: 'babel-loader'

To see what else you might need to change, you can have a look at the migration guide from the official docs: https://webpack.js.org/guides/migrating/