Gatsby- 无法在 'C:\Users\...\gatsby-starter-hello-world\node_modules\postcss\lib' 中解析 'path'

Question

我正在尝试将 sanitize-html 包与 @types/sanitize-html 一起用于打字稿，但它会导致以下错误 -

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

如果我这样做 npm i path，构建时错误就会消失；但它会导致运行时错误-

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)

追查报错行，就是这条报错-

var isWindows = process.platform === 'win32';

所以 简而言之，sanitize-html 包在没有显式安装的情况下无法识别 path。安装时，path 模块无法识别 process。我该如何解决这个问题？

如果没有，是否有任何支持 typescript 的替代清理包？

Answer 1

根据 this comment on GitHub. It seems to be related to the fact that webpack has removed polyfills in their new v5 version，问题已在 v8.2.7 中修复，这是 postcss 所需的依赖项，sanitize-html 也使用它。

但是，如果问题仍然存在，应该通过安装 path-browserify（由 npm i path-browserify）并在您的 gatsby-node.js 中将以下后备添加到 webpack 的重写配置来解决，onCreateWebpackConfig API 应该有效：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
   resolve: {
      fallback: {
        path: require.resolve('path-browserify'),
      },
    },
  })
}

来源：修改自https://github.com/postcss/postcss/issues/1509#issuecomment-772097567

我根据提示的错误回答：

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'

Gatsby- 无法在 'C:\Users\...\gatsby-starter-hello-world\node_modules\postcss\lib' 中解析 'path'

Gatsby- Can't resolve 'path' in 'C:\Users\...\gatsby-starter-hello-world\node_modules\postcss\lib'

path

node.js

node-modules

gatsby