升级到React 18后在生产环境中出现错误。

Question

我正在尝试更新这个 Next JS Starter 中的依赖项https://github.com/timlrx/tailwind-nextjs-starter-blog。

在将 react 和 react-dom 升级到 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 https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/41839607af9db071eadb60fa9fc4ffb4942661cf/next.config.js#L75toL83

但是在升级React后出现了问题，只有Preact保持不变

要重现问题，只需克隆repo并将React和React-DOM版本更改为18.0.0

构建网站后导航时，您将看到该问题

- silentnow

Answer 1

Preact目前还没有支持React v18中的新钩子函数。您需要恢复使用旧的钩子函数。

您可以跟踪以下问题，该问题将在Preact中添加这些钩子函数：https://github.com/preactjs/preact/pull/3510 顺便提一下：您应该真正坚持使用一个库（Preact或React用于开发和生产）。基于环境切换它们会使您极易遇到意料之外的小不一致性。您的开发环境应始终尽力匹配您的生产环境，因此如果这意味着使用Preact，则在开发中也应使用Preact。

这是一种非常糟糕的做法，但在NextJS用户中却很流行。

- rschristian

---

看起来Preact还不支持它。我看到还有未解决的PR问题。 - james emanon

Answer 2

升级到react 18后，我也遇到了与您相同的问题，因为我也在使用该模板。

经过一天的尝试寻找解决方案，没有任何可能的解决方法，而且已经关闭了接受答案中提到的PR，我决定在生产环境中将从react 切换到 preact 的操作移除（即在开发和生产中都使用react），这解决了问题，网站正常工作。

以下是如何操作：

1. 打开next.config.js
2. 注释/删除在生产环境中从react 切换到 preact 的部分

// 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',
//  })
// }

参考自我的代码库。

- Leo Huynh

---

那个PR已经关闭，因为有一个更新的版本。大多数钩子已经添加了。您是否有特定的问题？ - rschristian

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community