Gatsby：部署到 netlify 时“无法读取未定义的属性‘拆分’”

Question

我有这个 Gatsby 项目，我习惯于毫无问题地进行部署，直到遇到新的 v3。现在，当我使用 Netlify 进行部署时，我收到了这个错误，我没有进入开发模式。

Cannot read property 'split' of undefined

我没有包含split的文件。我最近刚刚完全更新并修复了我的网站的重大变化。

package.json:

{
  "name": "menefex",
  "private": true,
  "description": "Wij bouwen websites & webapps bouwen met oog voor detail.",
  "version": "1.8.7",
  "engines": {
    "node": ">=8.0.0"
  },
  "author": "Michael Fransman <[email protected]>",
  "license": "agpl-3.0",
  "scripts": {
    "build": "gatsby clean && gatsby build",
    "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop -H 0.0.0.0 --open",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "eslint-check": "eslint --print-config .eslintrc | eslint-config-prettier-check",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
  },
  "dependencies": {
    "@contentful/rich-text-html-renderer": "^15.2.0",
    "@contentful/rich-text-types": "^15.1.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "@sendgrid/mail": "^7.4.6",
    "axios": "^0.21.1",
    "bootstrap": "^5.1.0",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "dotenv": "^10.0.0",
    "gatsby": "^3.12.0",
    "gatsby-plugin-canonical-urls": "^3.12.0",
    "gatsby-plugin-catch-links": "^3.12.0",
    "gatsby-plugin-disqus": "^1.2.2",
    "gatsby-plugin-feed": "^3.12.0",
    "gatsby-plugin-google-tagmanager": "^3.12.0",
    "gatsby-plugin-image": "^1.12.0",
    "gatsby-plugin-manifest": "^3.12.0",
    "gatsby-plugin-netlify": "^3.12.0",
    "gatsby-plugin-nprogress": "^3.12.0",
    "gatsby-plugin-offline": "^4.12.0",
    "gatsby-plugin-react-helmet": "^4.12.0",
    "gatsby-plugin-robots-txt": "^1.6.9",
    "gatsby-plugin-sass": "^4.12.0",
    "gatsby-plugin-sharp": "^3.12.0",
    "gatsby-plugin-sitemap": "^4.8.0",
    "gatsby-plugin-smoothscroll": "^1.2.0",
    "gatsby-remark-images": "^5.9.0",
    "gatsby-remark-images-contentful": "^4.9.0",
    "gatsby-remark-relative-images": "^2.0.2",
    "gatsby-source-contentful": "^5.12.0",
    "gatsby-source-filesystem": "^3.12.0",
    "gatsby-transformer-remark": "^4.9.0",
    "gatsby-transformer-sharp": "^3.12.0",
    "google-map-react": "^2.1.10",
    "netlify-lambda": "^2.0.14",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-animate-on-scroll": "^2.1.5",
    "react-animated-css": "^1.2.1",
    "react-bootstrap": "^1.6.1",
    "react-cookie-consent": "^6.3.0",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "sass": "^1.38.0",
    "smooth-scroll": "^16.1.3",
    "swiper": "^6.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/eslint-parser": "^7.15.0",
    "babel-preset-gatsby": "^1.12.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-import": "^2.24.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^3.0.1",
    "gatsby-plugin-eslint": "^3.0.0",
    "prettier": "^2.3.2"
  },
  "resolutions": {
    "graphql": "^15.4.0",
    "graphql-compose": "^7.25.0",
    "contentful": "^8.1.7",
    "webpack": "^5.24.2",
    "postcss": "^8.2.15"
  },
  "homepage": "https://menefex.nl",
  "keywords": [
    "menefex"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/mikeyfe6/menefex"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

这可能是 Webpack 的问题，因为

gatsby build && gatsby serve

结果如下：

Answer 1

这当然不是 GraphQL 的问题。您可以通过在本地环境中使用

gatsby build --verbose

.

制作 Gatsby 存储库的生产构建来重现该问题

完成详细构建后，您应该会看到错误是由于 Gatsby webpack 配置引起的。现在，由 Gatsby 维护者提供的fix只是通过

npm i -D [email protected]

对包进行修复。在 Gatsby 的下一个次要版本发布时，您不应该需要此修复程序。

Answer 2

你可以使用 路径名?.split("/")

对我有用