Reactjs Gatsby生成，生成生产JavaScript和CSS包失败错误

我在和盖茨比一起开发一个项目。当我想要构建时，我在终端上得到这个错误。我尝试了很多解决方案。我删除了节点模块adnd package-lock.json文件，我重新安装了npm。我尝试了gatsby clean。我认为这是由节点sass引起的，我删除了节点saas并重新安装了它们，我安装了旧版本，但没有结果。以前有人遇到并解决过这个问题吗？你能帮忙吗

这是我的终端

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": {
    "babel-plugin-styled-components": "^1.12.0",
    "gatsby": "^2.26.1",
    "gatsby-image": "^2.5.0",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-manifest": "^2.6.1",
    "gatsby-plugin-offline": "^3.4.0",
    "gatsby-plugin-react-helmet": "^3.4.0",
    "gatsby-plugin-sass": "^2.7.0",
    "gatsby-plugin-sharp": "^2.8.0",
    "gatsby-plugin-styled-components": "^3.6.0",
    "gatsby-source-filesystem": "^2.5.0",
    "gatsby-transformer-json": "^2.7.0",
    "gatsby-transformer-sharp": "^2.6.0",
    "node-sass": "4.14.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.1.0",
    "styled-components": "^5.2.1",
    "swiper": "^6.4.1"
  },
  "devDependencies": {
    "prettier": "2.1.2",
    "webpack": "^5.10.1"
  },
  "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"
  }
}

[
    {
        "img" : "../assets/images/spotify-project.jpg",
        "alt" : "Spotify Website Clone",
        "name": "Spotify Website Clone",
        "button" : "View Project"
    },
    {
        "img" : "../assets/images/room-homapage-master.png",
        "alt" : "Room Homepage Master",
        "name": "Frontend Mentor Challenge",
        "button" : "View Project"
    },
    {
        "img" : "../assets/images/sokaga-cikabilirmiyim.png",
        "alt" : "Sokağa Çıkabilir miyim ?",
        "name": "Sokağa Çıkabilir miyim ?",
        "button" : "View Project"
    }
]

Project.js

import React from "react"
import styled from "styled-components"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
import { Button } from "./styles/Button"

function Projects() {
  const data = useStaticQuery(graphql`
    query ProjectsQuery {
      allProjectsJson {
        edges {
          node {
            alt
            button
            name
            img {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  `)

  function getProjects(data) {
    const projectsArray = []
    data.allProjectsJson.edges.forEach((item, index) => {
      projectsArray.push(
        <ProjectsCard key={index}>
          <ProjectImg
            src={item.node.img.childImageSharp.fluid.src}
            alt={item.node.alt}
            fluid={item.node.img.childImageSharp.fluid}
          />
          <ProjectsInfo>
            <TextWrap>
              <ProjectTitle>{item.node.name}</ProjectTitle>
            </TextWrap>
            <Button to="/Projects" primary="true" round="true">
              {item.node.button}
            </Button>
          </ProjectsInfo>
        </ProjectsCard>
      )
    })
    return projectsArray
  }

  return (
    <ProjectsContainer>
      <ProjectsHeading>Projects</ProjectsHeading>
      <ProjectsWrapper>{getProjects(data)}</ProjectsWrapper>
    </ProjectsContainer>
  )
}

从“React”导入React
从“样式化组件”导入样式化
从“盖茨比”导入{useStaticQuery，graphql}
从“盖茨比图像”导入Img
从“/styles/Button”导入{Button}
功能项目（）{
常量数据=useStaticQuery（graphql`
查询项目查询{
艾尔项目{
边缘{
节点{
中高音
按钮
名称
img{
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
}
}
}
}
`)
功能项目（数据）{
const projectsArray=[]
data.allProjectsJson.edges.forEach（（项目，索引）=>{
推(
{item.node.name}
{item.node.button}
)
})
返回项目
}
返回(
项目
{getProjects（数据）}
)
}

您的代码中有一些错误

由此推断，您有一个类似于

/assets/image name.png

的图像文件夹结构，但是，在

项目.json

中，您指向的是

/assets/images/image name.png

。将您的JSON更改为：

[
    {
        "img" : "../assets/spotify-project.jpg",
        "alt" : "Spotify Website Clone",
        "name": "Spotify Website Clone",
        "button" : "View Project"
    },
    {
        "img" : "../assets/room-homapage-master.png",
        "alt" : "Room Homepage Master",
        "name": "Frontend Mentor Challenge",
        "button" : "View Project"
    },
    {
        "img" : "../assets/sokaga-cikabilirmiyim.png",
        "alt" : "Sokağa Çıkabilir miyim ?",
        "name": "Sokağa Çıkabilir miyim ?",
        "button" : "View Project"
    }
]

注意：我已删除

/images/

在

MenuData.js

中，您正在导出

MenuData

，但正在导入

MenuData

（注意大写的

M

）

---

一旦修复，您的项目将在没有错误或警告的情况下生成。

您能否共享您的

gatsby node.js

？gatbsy-node.js是空的，我还没有写任何东西。问题可能来自这里吗？您的代码中是否使用类似于：obj.inclides（类似于数组方法）的smth麻烦的是obj没有定义。你在使用一些GraphQL查询吗？@FerranBuireu是的，我在使用它，我已经更新了我的问题。我添加了projects.json和我的组件文件。我真的很感谢你花时间帮助我，当我运行gatsby develop时，项目可以运行，但当我运行gatsby build时，项目不能运行，我是第一次使用盖茨比，这实际上是我的第一个项目。项目在CodeSandbox和本地运行，但是当我在两侧运行盖茨比构建时，项目不起作用。你能试着解释一下“为什么不起作用”或者出现了什么错误吗？我现在在CodeSandbox中没有错误，但在本地有错误。我已经应用了您所做的更改，但仍然会出现相同的错误。你能从这里控制它吗？未能构建生产JavaScript和CSS捆绑包-0.363s错误#98123 WEBPACK undefined无法读取undefined的属性“includes”。例如，我在Vercel的CodeSandbox中部署了该项目并在那里工作，但在我自己的本地项目中再次出现错误。我在当地可能有问题。你介意我用npm代替纱线吗？之前，我删除了节点模块和package-lock.json文件，并重新安装了npm。这不是

npm

或

warn

的问题，可能是版本或节点版本的问题。尝试删除您的

node\u模块

，

package lock.json

，并使用

纱线升级

或npm中的类似功能升级您的模块。您还可以比较工作/非工作环境的节点版本