Webpack打破盖茨比网站内置模块的变化

Webpack breaking changes for builtin modules on Gatsby site(Webpack打破盖茨比网站内置模块的变化)

问题描述

我尝试将我的Gatsby站点部署到Netlify，但每次尝试部署时，我都会收到各种节点模块的这些错误。我尝试制作了一个webpack.config.js文件，并将两个建议的解决方案都包含在内，但都无济于事。我还尝试使用别名而不是回退，将浏览器部分添加到将模块设置为FALSE的Package.json文件中，并像其他一些堆栈溢出答案所建议的那样在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"),
        },
    },
}

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

推荐答案

在Gatsby中，您不能像以前那样定义webpack配置，因为Gatsby会发送自己的webpack.config.js，因为您可以读取Gatsby's glossary。

但是，Gatsby允许您通过公开gatsby-node.js文件中的onCreateWebpackConfig方法来添加custom webpack configuration。

所以：

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

这篇关于Webpack打破盖茨比网站内置模块的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！