Uncaught Error: Minified React error #425

Question

When moving my application to production, these errors appeared, and I have no idea what it could be.

I'm using:

    // package.json
    "dependencies": {
    "@supabase/supabase-js": "^1.35.6",
    "date-fns": "^2.29.2",
    "duration-fns": "^3.0.1",
    "next": "^12.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.34.2",
    "react-icons": "^4.4.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8"
  }

Answer 1

I notice date-fns in your dependencies. I suspect you're creating a new date inside your render.

Any impure values (like the current date) computed and used on initial render in your component will produce a content mismatch:

Text content does not match server-rendered HTML.

Solution

The solution is to create your date(s) inside useEffect. Now only the client computes the new date and updates the DOM.

An example might be changing this:

export default function App() {
  const date = format(new Date(), "MM.dd.yyyy");

  return <div>{date}</div>;
}

To this:

export default function App() {
  const [date, setDate] = useState(null);

  useEffect(() => {
    setDate(format(new Date(), "MM.dd.yyyy"));
  }, []);

  return <div>{date}</div>;
}

Now the impure value is computed only after mount on the client and the mismatch cited in the hydration error will be resolved.

Answer 2

It is not clear what the issue is from only this, I would guess you use a custom bundling solution / manual setup. Do you think you could be persuaded to move to something like Create React App?