Error in production after upgrading to react 18

Question

I am trying to update dependencies in this Next JS Starter https://github.com/timlrx/tailwind-nextjs-starter-blog

After upgrading react and react-dom to 18.0.0 everything was working fine in development

But in production when trying to Navigate to other pages. The new page is not being rendered and this error is being logged in the console

TypeError: (0 , h.default.startTransition) is not a function
    at h.default.createElement.callbacks (main-8f675a98ab9e3b2e.js:1:16469)
    at fe (main-8f675a98ab9e3b2e.js:1:16546)
    at main-8f675a98ab9e3b2e.js:1:11506
    at l (main-8f675a98ab9e3b2e.js:1:93120)
    at Generator._invoke (main-8f675a98ab9e3b2e.js:1:92908)
    at Generator.S.forEach.e.<computed> [as next] (main-8f675a98ab9e3b2e.js:1:93543)
    at M (main-8f675a98ab9e3b2e.js:1:6457)
    at i (main-8f675a98ab9e3b2e.js:1:6660)
    at main-8f675a98ab9e3b2e.js:1:6719
    at new Promise (<anonymous>)

A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred

Uncaught (in promise) Error: Cancel rendering route
    at Y (main-8f675a98ab9e3b2e.js:1:14883)
    at main-8f675a98ab9e3b2e.js:1:14823
    at new Promise (<anonymous>)
    at fe (main-8f675a98ab9e3b2e.js:1:14793)
    at main-8f675a98ab9e3b2e.js:1:12790

Uncaught (in promise) TypeError: (0 , h.default.startTransition) is not a function
    at h.default.createElement.callbacks (main-8f675a98ab9e3b2e.js:1:16469)
    at fe (main-8f675a98ab9e3b2e.js:1:16546)
    at main-8f675a98ab9e3b2e.js:1:12790

In production they switch from react to preact https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/41839607af9db071eadb60fa9fc4ffb4942661cf/next.config.js#L75toL83

But the issues occurs after upgrading react only preact is left unchanged

To reproduce just clone the repo and change react and react-dom version to 18.0.0

After building your site when navigating you will see the issue

Answer 1

Preact doesn't yet shim the new hooks in React v18. You'll need to revert usage of the new hooks.

You can track the following issue which adds the hooks to Preact: https://github.com/preactjs/preact/pull/3510

Side note: You should really stick to one lib (Preact in dev or React in prod). Switching between them based on the environment makes you extremely prone to running into small inconsistencies that you won't expect. Your dev environment should always be a best-effort to match your production environment, so if that means using Preact, you should use Preact in dev too.

This is a really bad practice that's somehow gotten popular with NextJS users.