Reputation: 323
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