javascript - Zásadní změny Webpacku pro vestavěné moduly na webu Gatsby

Zkoušel jsem nasadit svůj Gatsby web na Netlify, ale stále dostávám tyto chyby u různých modulů Node pokaždé, když se pokusím nasadit. Zkoušel jsem vytvořit soubor webpack.config.js a zahrnout obě navrhované řešení, ale bez úspěchu. Také jsem zkoušel použít alias místo fallback, přidat sekci browser do souboru package.json, která nastavuje moduly na false, a přidat vlastnost target v souboru webpack.config.js, jak navrhovaly některé další odpovědi na Stackoverflow, ale stále jsem dost uvízl. Nemám žádné předchozí zkušenosti s webpackem a snažím se co nejvíce hledat odpovědi. Existuje nějaká speciální konfigurace pro toto u Gatsby, kterou mi chybí?

Chybová zpráva

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 <[email >",
  "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"
  }
}

Odpověď č. 1

V Gatsbymu nemůžete definovat konfiguraci webpacku jako dříve, protože Gatsby dodává vlastní webpack.config.js, jak můžete přečíst ve slovníku Gatsby.

Gatsby vám však umožňuje přidat vlastní konfiguraci webpacku tím, že zpřístupní metodu onCreateWebpackConfig ve vašem souboru gatsby-node.js.

Tak:

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

Mělo by se stát:

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

Jak jsem řekl, onCreateWebpackConfig je metoda dostupná pouze v souboru gatsby-node.js, takže tento kódový úryvek musí být umístěn tam.