Error in production after upgrading to react 18

user_16659322 0
Viewed 944

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

Console error log screenshot

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

preact next.js reactjs
2 Answers

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 or React for both dev & 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.

user_153881640

Having the same problem with you after upgrading to react 18 as I'm using that template too.

After a day of trying to find a solution w/o having any possible workaround and the PR mentioned in the accepted answer has been closed I decided to remove switching from react to preact in production (i.e., using react for both dev and prod) and it solved the issue and the site worked fine.

Here is how to do that:

  1. Open next.config.js
  2. Comment/remove the part that switches from react to preact in prod

// if (!dev && !isServer) {
//  // Replace React with Preact only in client production build
//  Object.assign(config.resolve.alias, {
//      'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
//      react: 'preact/compat',
//      'react-dom/test-utils': 'preact/test-utils',
//      'react-dom': 'preact/compat',
//  })
// }

Reference from my repo.

user_93902390
Related