升级为React 18后生产错误

Question

我正在尝试更新此下一个JS Starter https://github.com/timlrrrx /tailwind-nextjs-starter-blog

在升级React并反应到18.0.0后，一切都在开发方面运作良好，

但是在试图导航到其他页面时的生产都很好。新页面没有被渲染，并且该错误已在控制台

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

在生产中，它们从react转换为preact DB071EADB60FA9FC4FFB4942661CF/next.config。 JS＃L75TOL83

但是，这些问题发生在升级React React PREACT之后出现的不变

以重现以重现

nofollow noreferrer“> repo ，然后在构建网站后，

Answer 1

React V18中的新钩子尚未解决。您需要恢复新挂钩的使用。

您可以跟踪以下问题，这些问题将挂钩添加到提前： https：//github.com/preactjss /preact/pull/3510

侧面注意：您应该真正坚持一个lib（对dev＆amp; prod均可进行反应或反应）。基于环境之间的切换使您非常容易遇到您不会期望的小矛盾之处。您的开发环境应该始终是匹配生产环境的最佳效果，因此，如果这意味着要使用preact，则也应该在开发中使用preact。

这是一种非常糟糕的做法，在某种程度上在NextJS用户中受欢迎。

Answer 2

在升级到React> React 18之后，您对您也有同样的问题，我也使用该模板。

经过一天的试图找到解决方案的解决方案，并且已关闭了被接受的答案中提到的PR，我决定从React> React preaeAct中删除切换。在生产中（即，使用react dev和prod），它解决了问题，并且该网站正常工作。

这是这样做的方法：

1. open next.config.js
2. 注释/删除react> react preactect in for in prod 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',
//  })
// }

参考