Webpack can't resolve file loader js files

Question

I keep getting this error Can't resolve 'file-loader'

I am running webpack serve command. I've tried different regex but it always shows the same mistake. if this may have something to do with the way in which the React files are placed let me know.

package.json

{
  "name": "Tick",
  "version": "1.0.0",
  "description": "Productivity app",
  "main": "src/server/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "nodemon src/server/app.js",
    "dev": "webpack serve",
    "build": "webpack"
  },
  "author": "Gabriel Gamboa",
  "license": "ISC",
  "dependencies": {
    "cross-env": "^7.0.3",
    "express": "^4.17.1",
    "nodemon": "^2.0.13",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.54.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.0"
  }
}

Webpack config

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

module.exports = {
  entry: path.join(__dirname, "src", "client", "index.js"),
  mode: 'development',
  output: {
    path:path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }]
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: ['file-loader'],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "client", "index.html"),
    }),
  ],
}

Please help I've tried everything

Answer 1

You need to install it as it is not listed in your package.json file as a dependency.

npm i file-loader -D