在生产中使用 gatsby-background-image 插件时生成的最小 React 错误 #418

Question

盖茨比相对较新。我在完成我的项目时第一次遇到问题。在开发中一切正常。但是在 gatsby build 和 gatsby serve 之后浏览器出现错误：

react-dom.production.min.js:131 未捕获错误：缩小 React 错误 #418；访问 https://reactjs.org/docs/error-decoder.html?invariant=418 获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。 在 sa (react-dom.production.min.js:131:159) 在 Ei (react-dom.production.min.js:293:379) 在 ks (react-dom.production.min.js:280:389) 在 ys (react-dom.production.min.js:280:320) 在 vs (react-dom.production.min.js:280:180) 作为 (react-dom.production.min.js:268:209) 在 S (scheduler.production.min.js:13:203) 在 MessagePort.T (scheduler.production.min.js:14:128)

经过一段时间的故障排除、删除插件和部分代码后，我遇到了 gatsby-background-image。从代码中删除它后，错误就消失了。

只是为了确保我使用空的和新安装的 gatsby 项目测试了它，

npm init gatsby

.

index.js

import * as React from "react";
import { graphql } from "gatsby";
import BackgroundImage from "gatsby-background-image";

const pageStyles = {
  color: "#232129",
  padding: 96,
  fontFamily: "-apple-system, Roboto, sans-serif, serif",
};

const bgImage = {
  minHeight: "100vh",
  backgroundPosition: "center",
  backgroundAttachment: "fixed",
  backgroundSize: "cover",
  backgroundRepeat: "no-repeat",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};


const IndexPage = ({ data }) => {
  const imageData = data.imageBcg.childImageSharp.fluid;
  return (
    <main style={pageStyles}>
      <BackgroundImage Tag="section" fluid={imageData} style={bgImage}>
        <h2>gatsby-background-image</h2>
      </BackgroundImage>
    </main>
  );
};

export default IndexPage;

export const Head = () => <title>Home Page</title>;

export const query = graphql`
  query {
    imageBcg: file(relativePath: { eq: "bouq.jpg" }) {
      childImageSharp {
        fluid(quality: 90, maxWidth: 1920) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`;

I got the same error after gatsby build.

我的节点版本：node -v
v18.12.1

我的包.json：

   {
  "name": "my-gatsby-site",
  "version": "1.0.0",
  "private": true,
  "description": "my-gatsby-site",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "babel-plugin-styled-components": "^2.0.7",
    "gatsby": "^5.7.0",
    "gatsby-background-image": "^1.6.0",
    "gatsby-plugin-image": "^3.7.0",
    "gatsby-plugin-sharp": "^5.7.0",
    "gatsby-plugin-styled-components": "^6.7.0",
    "gatsby-source-filesystem": "^5.7.0",
    "gatsby-transformer-sharp": "^5.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^5.3.8"
  }
}