max
max

Reputation: 323

TypeError: Cannot read properties of undefined (reading 'tap') after moving index.html inside client folder in React project

I encountered an issue after restructuring my React project by moving the index.html file into a client folder. I started getting the following error when trying to run my development server:

[webpack-cli] TypeError: Cannot read properties of undefined (reading 'tap')
    at exports.tap (/path-to-project/node_modules/hard-source-webpack-plugin/lib/util/plugin-compat.js:118:25)
    at new CacheSerializerFactory (/path-to-project/node_modules/hard-source-webpack-plugin/lib/CacheSerializerFactory.js:94:18)
    at HardSourceWebpackPlugin.apply (/path-to-project/node_modules/hard-source-webpack-plugin/index.js:219:36)
...

Here is a simplified version of my webpack.config.js where I suspect the issue might be:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const { propIf, isDevelopment } = require('webpack-config-utils');

module.exports = {
  // other configurations
  plugins: [
    propIf(isDevelopment(), new HardSourceWebpackPlugin()),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/index.html'),
      filename: 'index.html',
      favicon: "./src/assets/images/favicon.ico",
      meta: {
        buildStamp: (new Date()).toISOString()
      }
    }),
  ],
};

Here are the key packages and versions I'm using:

"webpack": "^5.95.0",
"webpack-cli": "^5.1.4",
"webpack-config-utils": "^2.3.1",
"webpack-dev-server": "^5.1.0",
"webpack-subresource-integrity": "^5.2.0-rc.1",
"html-webpack-plugin": "^5.6.0",

old folder structure

project-root/
│
├── src/
│   ├── assets/
│   └── other-src-files/
│
├── index.html
├── webpack.config.js
└── other-root-files/

New folder structure

project-root/
│
├── client/
│   ├── index.html
│   ├── src/
│   ├── assets/
│   └── other-client-files/
│
├── webpack.config.js
└── other-root-files/

The error started after I moved the index.html file inside the client folder from the root directory. Is there a known solution for this issue? How can I fix this without downgrading Webpack?

Upvotes: 0

Views: 107

Answers (0)

Related Questions