Gatsby 站点中 Webpack 内置模块的重大变化

Question

我尝试将我的Gatsby网站部署到Netlify，但每次尝试部署时，我都会遇到各种不同的节点模块错误。我尝试创建webpack.config.js文件并包含两个建议的解决方案，但都没有成功。我还尝试使用别名而不是回退，向package.json文件中添加一个浏览器部分来将模块设置为false，以及在webpack.config.js文件中添加一个目标属性，正如其他stackoverflow答案所建议的那样，但我还是陷入了困境。我之前没有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"),
        },
    },
}

package.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 <[e-mail]>",
  "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"
  }
}

- Sabnock66

Answer 1

在 Gatsby 中，你无法像以前那样定义 webpack 配置，因为 Gatsby 使用自己的 webpack.config.js，你可以在 Gatsby 词汇表 中了解这一点。

然而，Gatsby 允许你通过在 gatsby-node.js 文件中暴露 onCreateWebpackConfig 方法来添加自定义的 webpack 配置。

所以：

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"),
        },
    },
}

Should become:

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 文件中公开的方法，因此该片段必须放置在那里。

- Ferran Buireu