Nsryjdtyk

I had stucking in this problem for a long time and not find out how to solve it. I just want to solve this issue and deploy it.

MERN - Error: Child compilation failed: Entry module not found: Error: Can't resolve 'html-loader'

Html Webpack Plugin:
Error: Child compilation failed:
Entry module not found: Error: Can't resolve 'html-loader' in 'C:UsersWachir awitDesktopKaewlomsupAnimalsCare':
Error: Can't resolve 'html-loader' in 'C:UsersWachirawitDesktopKaewlomsupA nimalsCare'

• compiler.js:79 childCompiler.runAsChild
  [KaewlomsupAnimalsCare]/[html-webpack-plugin]/lib/compiler.js:79:16




• Compiler.js:296 compile
  [KaewlomsupAnimalsCare]/[webpack]/lib/Compiler.js:296:11




• Compiler.js:552 hooks.afterCompile.callAsync.err
  [KaewlomsupAnimalsCare]/[webpack]/lib/Compiler.js:552:14




• Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [KaewlomsupAnimalsCare]/[tapable]/lib/Hook.js:154:20




• Compiler.js:549 compilation.seal.err
  [KaewlomsupAnimalsCare]/[webpack]/lib/Compiler.js:549:30




• Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [KaewlomsupAnimalsCare]/[tapable]/lib/Hook.js:154:20




• Compilation.js:1323 hooks.optimizeAssets.callAsync.err
  [KaewlomsupAnimalsCare]/[webpack]/lib/Compilation.js:1323:35

webpack.config.js

    const path = require("path");

    const HtmlWebpackPlugin = require("html-webpack-plugin");

    const CleanWebpackPlugin = require("clean-webpack-plugin");



    const outputDirectory = "dist";



    module.exports = {

      entry: ["babel-polyfill", "./src/client/index.js"],

      output: {

        path: path.resolve(__dirname, outputDirectory),

        filename: "bundle.js"

      },

      module: {

        rules: [

          {

            test: /.(js)$/,

            exclude: /node_modules/,

            use: {

              loader: "babel-loader"

          }

          },

          {

            test: /.(css)$/,

            use: ["style-loader", "css-loader"]

          },

          {

            test: /.png|woff|woff2|eot|ttf|svg)$/,

            loader: "url-loader?limit=100000"

          },

          {

            test: /.(html)$/,

            exclude: [/node_modules/,require.resolve("./src/client/index.js")],

            use: {

              loader: "html-loader"

            }

          }

        ]

      },

      devServer: {

        port: 3000,

        open: true,

        proxy: {

          "/api": "http://localhost:8080"

        }

      },

      plugins: [

        new CleanWebpackPlugin([outputDirectory]),

        new HtmlWebpackPlugin({

          template: "./public/index.html",

          favicon: "./public/favicon.ico"

        })

      ],

      resolve: {

        extensions: [".js", ".jsx"]

      }

    };

package.json

    {

      "name": "pth",

      "version": "1.0.0",

      "main": "src/server/index.js",

      "scripts": {

        "build": "webpack --mode production",

        "start": "npm run build && node ./src/server/index.js",

        "client": "webpack-dev-server --mode development --devtool inline-source-map --hot",

        "server": "nodemon ./src/server/index.js",

        "dev": "concurrently "yarn run server" "yarn run client""

      },

      "author": "BB",

      "license": "ISC",

      "dependencies": {

        "@babel/runtime": "^7.1.5",

        "axios": "^0.18.0",

        "babel-polyfill": "^6.26.0",

        "bcryptjs": "^2.4.3",

        "body-parser": "^1.18.3",

        "express": "^4.16.4",

        "express-jwt": "^5.3.1",

        "express-messages": "^1.0.1",

        "express-session": "^1.15.6",

        "express-validator": "^5.3.0",

        "jsonwebtoken": "^8.3.0",

        "mongoose": "^5.3.8",

        "passport": "^0.4.0",

        "passport-local": "^1.0.0",

        "prop-types": "^15.6.2",

        "react": "^16.6.0",

        "react-dom": "^16.6.0",

        "react-router": "^4.3.1",

        "react-router-dom": "^4.3.1",

        "universal-cookie": "^3.0.4"

      },

      "devDependencies": {

        "@babel/core": "^7.0.0",

        "@babel/plugin-proposal-class-properties": "^7.1.0",

        "@babel/plugin-transform-runtime": "^7.1.0",

        "@babel/preset-env": "^7.0.0",

        "@babel/preset-react": "^7.0.0",

        "babel-eslint": "^10.0.0",

        "babel-loader": "^8.0.0",

        "babel-plugin-transform-decorators-legacy": "^1.3.5",

        "babel-preset-env": "^1.6.1",

        "babel-preset-react": "^6.24.1",

        "clean-webpack-plugin": "^1.0.0",

        "concurrently": "^4.0.0",

        "css-loader": "^1.0.1",

        "eslint": "^5.8.0",

        "eslint-config-airbnb": "^17.0.0",

        "eslint-plugin-import": "^2.11.0",

        "eslint-plugin-jsx-a11y": "^6.0.3",

        "eslint-plugin-react": "^7.7.0",

        "file-loader": "^1.1.11",

        "html-webpack-plugin": "^3.2.0",

        "nodemon": "^1.18.5",

        "style-loader": "^0.23.1",

        "url-loader": "^1.1.2",

        "webpack": "^4.5.0",

        "webpack-cli": "^3.0.8",

        "webpack-dev-server": "^3.1.10"

      }

    }