18

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

console devTools. Error message.

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"
  }
3

5 Answers 5

7

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() {
  return <div>{format(new Date(), "MM.dd.yyyy")}</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.

1

The issue I've been through

Uncaught Error: Minified React error #425;
Uncaught Error: Minified React error #423;

error)

<style>

resolve)

<style jsx>

nextjs styled-jsx link)

https://nextjs.org/blog/styling-next-with-styled-jsx

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Sep 14 at 10:35
0

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?

1
  • 2
    i'm using NextJS and this error only happens in the host build. I tried it in Vercel and Netlify and the same thing. Sep 6, 2022 at 3:41
0

All your variables that depend on or collect values from the browser, need to be placed in a useEffect.

An example that causes this error and it happened to me:

const device = 'other';
if (
      typeof window !== 'undefined' &&
      typeof window.navigator !== 'undefined'
    ) {
      const ua = navigator.userAgent;

      if (/android/i.test(ua)) {
        device = 'android';
      }
    }

To solve it, I just put this condition inside the useEffect, so the code doesn't differ from what the browser is expecting:

  const [device, setDevice] = useState('other');

  useEffect(() => {
    if (
      typeof window !== 'undefined' &&
      typeof window.navigator !== 'undefined'
    ) {
      const ua = navigator.userAgent;

      if (/android/i.test(ua)) {
        setDevice('android');
      }
    }
  }, []);
0

For me it was a cookie consent library causing this. Check that also if you are using one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.