I'm trying to use sanitize-html package along with @types/sanitize-html for typescript, but it causes the following error-
ERROR in ./node_modules/postcss/lib/input.js 4:30-45
Module not found: Error: Can't resolve 'path' in 'C:\Users\sapin\Desktop\gatsby-starter-hello-world\node_modules\postcss\lib'
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.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./node_modules/postcss/lib/postcss.js 14:12-30
@ ./node_modules/sanitize-html/index.js 7:32-50
@ ./src/states/BlogsProvider.tsx 12:0-37 103:15-23 104:21-29 105:14-22
@ ./src/pages/bookmarks.tsx 10:0-51 18:24-32 61:10-18
@ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 36:11-38:5
@ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70
And I if do npm i path, the build time error goes away; but it causes a runtime error-
Uncaught ReferenceError: process is not defined
at eval (path.js:25)
at Object../node_modules/path/path.js (commons.js:2976)
at Object.options.factory (commons.js:4478)
at __webpack_require__ (commons.js:3881)
at fn (commons.js:4159)
at eval (map-generator.js:3)
at Object../node_modules/postcss/lib/map-generator.js (commons.js:3096)
at Object.options.factory (commons.js:4478)
at __webpack_require__ (commons.js:3881)
at fn (commons.js:4159)
Tracing the error line, it is this one that throws the error-
var isWindows = process.platform === 'win32';
So in short, the sanitize-html package can't recognize path without explicitly installing it. When installed, path module can't recognize process. How can I fix this?
If not, is there any alternative sanitizing package that supports typescript?
The issue is fixed in the v8.2.7, according to this comment on GitHub. It seems to be related to the fact that webpack has removed polyfills in their new v5 version, which is a needed dependency of postcss, which is also used by sanitize-html.
However, if the issue persists, it should be fixed by installing path-browserify (by npm i path-browserify) and adding the following fallback to webpack's overriding configuration, in your gatsby-node.js, onCreateWebpackConfig API should work:
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
fallback: {
path: require.resolve('path-browserify'),
},
},
})
}
Source: modified from https://github.com/postcss/postcss/issues/1509#issuecomment-772097567
I based the answer on the error prompted:
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. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify'