Gatsby-无法解析“C:\Users\...\gatsby-starter-hello-world\node_modules\postcss\lib”中的“路径”

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. 我怎样才能解决这个问题？

如果没有，是否有任何支持打字稿的替代消毒包？

Answer 1

v8.2.7根据GitHub 上的此评论，该问题已在 中修复。这似乎与webpack 在其新v5版本中删除了polyfills的事实有关postcss，这是sanitize-html.

但是，如果问题仍然存在，则应该通过安装path-browserify(by npm i path-browserify) 并将以下回退添加到 webpack 的覆盖配置中来修复它，在您的gatsby-node.js, onCreateWebpackConfigAPI 中应该可以工作：

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'