Webpack 对 Gatsby 网站上内置模块的重大更改

Question

我尝试将我的 Gatsby 站点部署到 Netlify，但每当我尝试部署时，我总是收到各种节点模块的这些错误。我尝试制作一个 webpack.config.js 文件并包含两个建议的解决方案，但均无济于事。我还尝试使用别名而不是后备，将浏览器部分添加到 package.json 文件中，将模块设置为 false，并按照其他一些 stackoverflow 答案的建议在 webpack.config.js 文件中添加目标属性，但是我还是很困惑。我之前没有任何 webpack 经验，并且一直在尽力寻找答案。我缺少 Gatsby 的某种特殊配置吗？

错误信息

10:37:20 AM: error Generating JavaScript bundles failed
10:37:20 AM: Can't resolve 'stream' in '/opt/build/repo/node_modules/cipher-base'
10:37:20 AM: If you're trying to use a package make sure that 'stream' is installed. If you're trying to use a local file make sure that the path is correct.
10:37:20 AM: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
10:37:20 AM: This is no longer the case. Verify if you need this module and configure a polyfill for it.
10:37:20 AM: If you want to include a polyfill, you need to:
10:37:20 AM:    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
10:37:20 AM:    - install 'stream-browserify'
10:37:20 AM: If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

webpack.config.js

module.exports = {
    target: 'node14.17',
    resolve: {
        fallback: {
            assert: require.resolve("assert/"),
            crypto: require.resolve("crypto-browserify"),
            http:  require.resolve("stream-http"),
            https: require.resolve("https-browserify"),
            os: require.resolve("os-browserify/browser"),
            stream: require.resolve("stream-browserify"),
        },
    },
}

包.json

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "crypto-browserify": "^3.12.0",
    "ethers": "^5.4.5",
    "gatsby": "^3.11.1",
    "gatsby-plugin-gatsby-cloud": "^2.11.0",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-image": "^1.11.0",
    "gatsby-plugin-manifest": "^3.11.0",
    "gatsby-plugin-offline": "^4.11.0",
    "gatsby-plugin-react-helmet": "^4.11.0",
    "gatsby-plugin-sharp": "^3.11.0",
    "gatsby-source-filesystem": "^3.11.0",
    "gatsby-transformer-sharp": "^3.11.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "web3": "^1.5.2"
  },
  "devDependencies": {
    "prettier": "2.3.2"
  },
  "browser": {
    "assert": false,
    "crypto": false,
    "http":   false,
    "https":  false
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Answer 1

在 Gatsby 中，您无法像以前那样定义 webpack 配置，因为 Gatsby 自带了自己的配置，您可以在Gatsby 的词汇表webpack.config.js中阅读。

但是，Gatsby 允许您通过在文件中公开方法来添加自定义 Webpack 配置。onCreateWebpackConfiggatsby-node.js

所以：

module.exports = {
    target: 'node14.17',
    resolve: {
        fallback: {
            assert: require.resolve("assert/"),
            crypto: require.resolve("crypto-browserify"),
            http:  require.resolve("stream-http"),
            https: require.resolve("https-browserify"),
            os: require.resolve("os-browserify/browser"),
            stream: require.resolve("stream-browserify"),
        },
    },
}

应该变成：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
   resolve: {
      fallback: {
          assert: require.resolve("assert/"),
          crypto: require.resolve("crypto-browserify"),
          http:  require.resolve("stream-http"),
          https: require.resolve("https-browserify"),
          os: require.resolve("os-browserify/browser"),
          stream: require.resolve("stream-browserify"),
      },
    },
  })
}

正如我所说，onCreateWebpackConfig这是一个仅在文件中公开的方法gatsby-node.js，因此该代码片段必须放置在那里。