Error: Can't resolve babel-loader… What is wrong with my webpack.config code?

Question

Banging my head against the wall for the past few hours trying to figure out what happened to my webpack.config. I even tried to revert to an older commit and still saw the same problems. Any ideas or suggestions would be much appreciated. Thanks! Posting my webpack.config and package.json below

webpack.config

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  entry: [ '@babel/polyfill', './app/index.js',],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader'},
      { test: /\.css$/, use: [ 'style-loader', 'css-loader']},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: 'app/index.html'
    })
  ],
  mode: process.env.NODE_ENV === 'production' ? 'production': 'development'
};

----------


 ## package.json

{
  "name": "my-reps",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "NODE_ENV='production' webpack",
    "firebase-init": "firebase login && firebase init",
    "deploy": "npm run build && firebase deploy"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "classnames": "^2.2.6",
    "firebase-tools": "^4.2.1",
    "jquery": "^3.3.1",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-places-autocomplete": "^7.2.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-twitter-embed": "^1.1.3",
    "react-twitter-widgets": "^1.7.1",
    "reactstrap": "^6.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-react-constant-elements": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.0",
    "babel-register": "^6.26.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

error message:

ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
 @ ./node_modules/lodash/lodash.js 1:0-41
 @ ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html

ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
 @ ./node_modules/lodash/lodash.js 1:0-41
 @ ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html

ℹ ｢wdm｣: Failed to compile.

Answer 1

Did you happened to update npm packages recently? Particularly the following packages in devDependencies:

• webpack
• webpack-cli
• babel
• babel-loader

Certain version of these packages may cause problems when building.

If so, you can try reinstalling devDependencies to the versions you used to use.

Another way is to use the latest version instead. Sometimes npm update command will not install the latest version for some reason. So you need to go to npm website and check the latest version of each devDependencies.