javascript - Gatsby sitesinde yerleşik modüller için Webpack kırılma değişiklikleri

Gatsby sitemi Netlify'e dağıtmaya çalıştım, ama dağıtmaya çalıştığımda çeşitli node modülleri için sürekli bu hataları alıyorum. webpack.config.js dosyası oluşturarak önerilen çözümlerden ikisini de eklemeye çalıştım ama işe yaramadı. Ayrıca fallback yerine alias kullanmayı, package.json dosyasına modülleri false olarak ayarlayan bir browser bölümü eklemeyi ve bazı diğer Stack Overflow cevaplarında önerildiği gibi webpack.config.js dosyasına target özelliği eklemeyi denedim, ancak hâlâ oldukça takıldım. Webpack hakkında herhangi bir ön deneyimim yok ve cevabı araştırmak için elimden geleni yapıyorum. Gatsby ile ilgili olarak kaçırdığım özel bir yapılandırma türü var mı?

Hata mesajı

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

Cevap #1

Gatsby'de, Gatsby kendi webpack.config.js'ini sunduğu için ve bunu Gatsby'nin sözlüğünde okuyabileceğiniz gibi, webpack yapılandırmasını tıpkı eskisi gibi tanımlayamazsınız.

Ancak, Gatsby, gatsby-node.js dosyanızda onCreateWebpackConfig yöntemini açığa çıkararak özel bir webpack yapılandırması eklemenize olanak tanır.

Yani :

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

Olmalı:

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

Dediğim gibi, onCreateWebpackConfig, yalnızca gatsby-node.js dosyasında açığa çıkarılan bir yöntemdir, bu yüzden o kod parçası oraya yerleştirilmelidir.