【问题标题】:Error in production after upgrading to react 18升级到反应 18 后生产出错
【发布时间】:2022-06-20 07:18:26
【问题描述】:

我正在尝试更新此 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

但升级后出现问题,只有 preact 保持不变

要复制,只需克隆 repo 并将 react 和 react-dom 版本更改为 18.0.0

在导航时构建您的网站后,您会看到问题

【问题讨论】:

    标签: reactjs next.js preact


    【解决方案1】:

    Preact 还没有填充 React v18 中的新钩子。您需要恢复对新挂钩的使用。

    您可以跟踪以下将钩子添加到 Preact 的问题:https://github.com/preactjs/preact/pull/3510

    旁注:您真的应该坚持使用一个库(开发和产品的 Preact 或 React)。根据环境在它们之间进行切换会使您极容易遇到意想不到的小不一致。您的开发环境应该始终尽力匹配您的生产环境,因此如果这意味着使用 Preact,那么您也应该在开发中使用 Preact。

    这是一种非常糟糕的做法,不知何故受到 NextJS 用户的欢迎。

    【讨论】:

    • 看起来 preact 还不能支持它。我看到公开 PR 还在。