CODEWITHSUNDEEP
reactjsgatsby
Nazor
Nazor

Reputation: 31

Minified React error #418 generated when using gatsby-background-image plugin in production

Relatively new to Gatsby. I first encountered problem when finishing working on my project. In development everything was ok. But after gatsby build and gatsby serve there where an error in browser:

react-dom.production.min.js:131 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at sa (react-dom.production.min.js:131:159) at Ei (react-dom.production.min.js:293:379) at ks (react-dom.production.min.js:280:389) at ys (react-dom.production.min.js:280:320) at vs (react-dom.production.min.js:280:180) at as (react-dom.production.min.js:268:209) at S (scheduler.production.min.js:13:203) at MessagePort.T (scheduler.production.min.js:14:128)

After a while of troubleshooting, removing plugins and parts of code i came across gatsby-background-image. After removing it from code the error is gone.

Just to be sure i tested it on using empty and newly installed gatsby project, with 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.

My node version: node -v
v18.12.1

My package.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"
  }
}

Upvotes: 3

Views: 8163

Answers (2)

Melissa Diaz
Melissa Diaz

Reputation: 1

In my case, I disabled the ad blocker, and it worked fine.

To resolve the issue in the code, I noticed that I was using new Date(), which caused a re-render each time it was called. To fix this, I memoized the result of the function, ensuring that it doesn't re-render unnecessarily and solve the problem.

Upvotes: 0

Bartosz W&#243;jtowicz
Bartosz W&#243;jtowicz

Reputation: 49

I was getting Minified React errors #418 and #423, but I finally figured out that the culprit was a Chrome extension called Video Speed Controller. Every time I loaded the page, it would cause my app to reload and trigger those errors. Once I disabled the extension, everything worked fine. So if anyone else is experiencing similar errors, it might be worth checking if you have any extensions that could be interfering with your app

Upvotes: 2

Related Questions