相对较新的盖茨比.我第一次遇到的问题时,完成我的项目工作.在发展一切都好.但后 * 盖茨比建立 * 和 * 盖茨比服务 * 有一个错误在浏览器:
react-dom.production.min.js:131未捕获错误:Minified React错误#418;访问https://reactjs.org/docs/error-decoder.html?invariant=418获取完整的消息,或者使用非缩小的开发环境获取完整的错误和其他有用的警告。at sa(react-dom. production.min.js:一百三十一:159)在Ei(react-dom.production. min. js:二百九十三:379)at ks(react-dom.production.min. js:二百八十:389)at ys(react-dom.production.min. js:二百八十:320)at vs(react-dom. production. min. js:二百八十:180)at as(react-dom. production. min. js:二百六十八:209)在S(scheduler.production.min. js:十三:203)在MessagePort.T(scheduler.production.min.js:十四:128)
经过一段时间的故障排除,删除插件和部分代码,我遇到了gatsby-background-image。从代码中删除后,错误消失了。
只是为了确保我测试了它使用空的和新安装的盖茨比项目,与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"
}
}
1条答案
按热度按时间py49o6xq1#
我收到了Miniified React错误#418和#423,但我最终发现罪魁祸首是一个名为Video Speed Controller的Chrome扩展程序。每次我加载页面时,它都会导致我的应用重新加载并触发这些错误。一旦我禁用了扩展程序,一切正常。所以如果其他人遇到类似的错误,如果您有任何可能干扰您的应用程序的扩展,则可能值得检查