盖茨比站点的Webpack v5 polyfill错误

Question

我在Gatsby网站上工作，我正试图将其部署到Netlify上，但收到了一个与其他StackOverflow帖子非常相似且几乎相同的错误，比如：see this post from 1 month ago

以下是错误消息：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }
 @ ./node_modules/jws/lib/sign-stream.js 3:17-41
 @ ./node_modules/jws/index.js 2:17-45
 @ ./node_modules/jsonwebtoken/verify.js 7:24-38
 @ ./node_modules/jsonwebtoken/index.js 3:10-29
 @ ./src/_MODERN/utils/jwt.js 5:0-44 42:0-50 42:0-50
 @ ./src/_MODERN/_apis_/account.js 9:0-44 70:26-30 145:26-30 187:15-21
 @ ./src/_MODERN/_apis_/index.js 8:0-19
 @ ./src/components/ui/root-wrapper.js 59:0-30
 @ ./gatsby-browser.js 10:0-59 11:29-40
 @ ./.cache/api-runner-browser-plugins.js 47:10-41
 @ ./.cache/api-runner-browser.js 4:14-53
 @ ./.cache/app.js 12:0-65 29:87-33:1 37:20-29 50:0-14 116:17-26 150:6-15 29:0-33:2

ERROR in ./node_modules/jws/lib/sign-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in
'/Users/seanmodd/Dev/jamstack-final/frontend/gatsby-final-chakra/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }
 @ ./node_modules/jws/index.js 2:17-45
 @ ./node_modules/jsonwebtoken/verify.js 7:24-38
 @ ./node_modules/jsonwebtoken/index.js 3:10-29
 @ ./src/_MODERN/utils/jwt.js 5:0-44 42:0-50 42:0-50
 @ ./src/_MODERN/_apis_/account.js 9:0-44 70:26-30 145:26-30 187:15-21
 @ ./src/_MODERN/_apis_/index.js 8:0-19
 @ ./src/components/ui/root-wrapper.js 59:0-30
 @ ./gatsby-browser.js 10:0-59 11:29-40
 @ ./.cache/api-runner-browser-plugins.js 47:10-41
 @ ./.cache/api-runner-browser.js 4:14-53
 @ ./.cache/app.js 12:0-65 29:87-33:1 37:20-29 50:0-14 116:17-26 150:6-15 29:0-33:2

ERROR in ./node_modules/jws/lib/verify-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in
'/Users/seanmodd/Dev/jamstack-final/frontend/gatsby-final-chakra/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }
 @ ./node_modules/jws/index.js 3:19-49
 @ ./node_modules/jsonwebtoken/verify.js 7:24-38
 @ ./node_modules/jsonwebtoken/index.js 3:10-29
 @ ./src/_MODERN/utils/jwt.js 5:0-44 42:0-50 42:0-50
 @ ./src/_MODERN/_apis_/account.js 9:0-44 70:26-30 145:26-30 187:15-21
 @ ./src/_MODERN/_apis_/index.js 8:0-19
 @ ./src/components/ui/root-wrapper.js 59:0-30
 @ ./gatsby-browser.js 10:0-59 11:29-40
 @ ./.cache/api-runner-browser-plugins.js 47:10-41
 @ ./.cache/api-runner-browser.js 4:14-53
 @ ./.cache/app.js 12:0-65 29:87-33:1 37:20-29 50:0-14 116:17-26 150:6-15 29:0-33:2

这是我的package.json文件：

{
  "name": "JAMstack-Course",
  "private": true,
  "description": "The frontend of a JAMstack e-commerce platform built for a Udemy course.",
  "version": "1.0.0",
  "author": "Zachary Reece <jamstack.course@gmail.com>",
  "browserslist": [
    ">0.25%",
    "not dead"
  ],
  "dependencies": {
    "@apollo/client": "^3.4.15",
    "@chakra-ui/gatsby-plugin": "^2.0.1",
    "@chakra-ui/react": "^1.6.9",
    "@emotion/cache": "11.4",
    "@emotion/react": "^11.4.1",
    "@emotion/server": "11.4",
    "@emotion/styled": "^11.3.0",
    "@fontsource/alata": "^4.5.0",
    "@fontsource/barlow": "^4.5.0",
    "@fontsource/inter": "^4.5.0",
    "@fontsource/karla": "^4.5.0",
    "@fontsource/poppins": "^4.5.0",
    "@fontsource/raleway": "^4.5.0",
    "@gatsbyjs/reach-router": "^1.3.6",
    "@hookform/devtools": "^4.0.1",
    "@hookform/resolvers": "2.8",
    "@iconify/icons-ant-design": "1.1",
    "@iconify/icons-eva": "1.1",
    "@iconify/icons-ic": "^1.1.1",
    "@iconify/react": "^3.0.1",
    "@loadable/component": "^5.15.0",
    "@material-ui/core": "^4.11.0",
    "@material-ui/data-grid": "^4.0.0-alpha.21",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@mui/icons-material": "^5.0.4",
    "@mui/lab": "^5.0.0-alpha.51",
    "@mui/material": "^5.0.2",
    "@mui/styles": "^5.0.1",
    "@mui/utils": "^5.0.1",
    "@mui/x-data-grid": "^4.0.1",
    "@react-pdf/renderer": "^2.0.19",
    "@reduxjs/toolkit": "^1.6.1",
    "@stripe/react-stripe-js": "^1.5.0",
    "@stripe/stripe-js": "^1.18.0",
    "@turf/bbox": "^6.5.0",
    "apexcharts": "^3.28.3",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.21.0",
    "axios-mock-adapter": "1.2",
    "bootstrap": "^4.6.0",
    "change-case": "^4.1.2",
    "cross-fetch": "^3.0.6",
    "crypto-browserify": "^3.12.0",
    "d3-array": "^3.0.2",
    "d3-scale": "^4.0.2",
    "date-fns": "^2.24.0",
    "deck.gl": "^8.5.8",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "emoji-mart": "^3.0.1",
    "formik": "^2.2.9",
    "framer-motion": "^4.1.17",
    "gatsby": "^3.14.0",
    "gatsby-plugin-image": "^1.6.0",
    "gatsby-plugin-loadable-components-ssr": "^3.4.0",
    "gatsby-plugin-manifest": "^3.14.0",
    "gatsby-plugin-material-ui": "^2.1.10",
    "gatsby-plugin-offline": "^3.2.28",
    "gatsby-plugin-react-helmet": "^3.3.11",
    "gatsby-plugin-robots-txt": "^1.6.2",
    "gatsby-plugin-sharp": "^3.14.0",
    "gatsby-plugin-sitemap": "^4.10.0",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-source-filesystem": "^2.3.30",
    "gatsby-source-strapi": "^1.0.2",
    "gatsby-transformer-sharp": "^3.14.0",
    "highlight.js": "11.2",
    "history": "^5.0.1",
    "i18next": "^20.6.1",
    "i18next-browser-languagedetector": "^6.1.2",
    "immutable": "^3.7.6",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^3.1.2",
    "lazysizes": "^5.3.2",
    "lodash": "^4.17.21",
    "madge": "^5.0.1",
    "mapbox-gl": "^2.4.1",
    "node-polyfill-webpack-plugin": "^1.1.4",
    "notistack": "^1.0.6-next.3",
    "nprogress": "^0.2.0",
    "numeral": "^2.0.6",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "prop-types": "^15.7.2",
    "react": "^17.0.0",
    "react-apexcharts": "^1.3.9",
    "react-beautiful-dnd": "^13.1.0",
    "react-bootstrap": "^2.0.0-rc.0",
    "react-copy-to-clipboard": "^5.0.4",
    "react-dom": "^17.0.0",
    "react-draft-wysiwyg": "^1.14.7",
    "react-dropzone": "^11.4.2",
    "react-helmet": "^6.1.0",
    "react-helmet-async": "^1.1.2",
    "react-hook-form": "^7.17.4",
    "react-i18next": "^11.12.0",
    "react-image-lightbox": "^5.1.4",
    "react-infinite-scroll-component": "^6.1.0",
    "react-intersection-observer": "^8.32.1",
    "react-lottie": "^1.2.3",
    "react-map-gl": "^6.1.17",
    "react-markdown": "^7.0.1",
    "react-quill": "^2.0.0-beta.4",
    "react-redux": "^7.2.5",
    "react-resize-aware": "^3.1.1",
    "react-scripts": "^4.0.1",
    "react-scroll": "^1.8.4",
    "react-slick": "^0.28.1",
    "react-spring": "^9.3.0",
    "redux": "^4.1.1",
    "redux-persist": "^6.0.0",
    "rehype-highlight": "^5.0.0",
    "rehype-raw": "^6.1.0",
    "simplebar": "^5.3.6",
    "simplebar-react": "^2.3.6",
    "slick-carousel": "^1.8.1",
    "stream-browserify": "^2.0.2",
    "stream-http": "^2.8.3",
    "stylis": "^4.0.1",
    "stylis-plugin-rtl": "^2.0.2",
    "uuid": "^8.3.2",
    "worker-loader": "^3.0.8",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.15.7",
    "@babel/preset-react": "^7.14.5",
    "@types/node": "^16.10.2",
    "@typescript-eslint/eslint-plugin": "^4.32.0",
    "@typescript-eslint/parser": "^4.32.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^14.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-wesbos": "^2.0.1",
    "eslint-plugin-html": "^6.2.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.4.1",
    "typescript": "^4.4.3"
  },
  "browser": {
    "stream": false,
    "crypto": 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/zreecespieces/jamstack-course"
  },
  "bugs": {
    "url": "https://github.com/zreecespieces/jamstack-course/issues"
  }
}

这是我在我的gatsby-node.js文件中包含的内容-这与我上面链接的StackOverflow帖子上的答案一致

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bad-module/,
            use: loaders.null(),
          },
        ],
      },
      resolve: {
        fallback: {
          crypto: require.resolve('crypto-browserify'),
          stream: require.resolve('stream-browserify'),
        },
      },
    })
  }
}

Answer 1

根据您所说的和您提供的内容，我将把onCreateWebpackConfig保留为：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
   resolve: {
      fallback: {
          crypto: require.resolve('crypto-browserify'),
          stream: require.resolve('stream-browserify'),
      },
    },
  })
}

/bad- module /是一个文本正则表达式，表示有问题的模块(如果有)绕过node_modules文件夹中第三方依赖项的window使用。在您的例子中，它没有做任何事情，因为在您的node_modules中没有/bad-module文件夹。

此外，您不需要stage === 'build-html条件，您希望在所有场景中应用该配置。