I have an npm package that works on Angular as well as on Node.js. Lately, I have started to use my package with Angular v12 projects. I am getting errors like:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
I need those packages (e.g. 'path'), and I cannot switch to the Webpack alternative (e.g. 'path-browserify') since I need this to work on nodejs.
The error says:
If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify'
Installing 'path-browserify' is easy. However, the error does not state where to add the fallback. I found in some posts that suggest I need to add it to Webpack.config.js. But in the Angular project, there is no such file; adding it did not have any effect. And even if there were such a file, it would not help me because I am an npm package, and I cannot change files in the application that uses me.
I can write a workaround for the 'path' package. However, other packages raised that error. Some of the packages (e.g., suppertest) are not meant to work from webpack, and I am not using them when running on angular, but since they are in my code, the webpack still raises this error. I am also using other packages that use themselves problematic packages like 'path' or 'stream,' and I cannot change them. How can this issue be solved?
As the error states, you should add resolve.fallback: { "path": require.resolve("path-browserify") } in your webpack config file.
// webpack.config.js
module.export = {
...
resolve: {
fallback: {
path: require.resolve("path-browserify")
}
}
...
}