升级到 React 18 后生产出错
Error in production after upgrading to react 18
我正在尝试更新此 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
在导航时构建您的网站后,您会看到问题
Preact 还没有填充 React v18 中的新钩子。您需要恢复新挂钩的使用。
您可以跟踪以下将挂钩添加到 Preact 的问题:https://github.com/preactjs/preact/pull/3510
旁注:你真的应该坚持使用一个库(开发中的 Preact 或生产中的 React)。根据环境在它们之间切换会使您极易 运行 出现您意想不到的小不一致。你的开发环境应该总是 best-effort 以匹配你的生产环境,所以如果这意味着使用 Preact,你也应该在开发中使用 Preact。
这是一个非常糟糕的做法,不知何故受到 NextJS 用户的欢迎。
我正在尝试更新此 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
在导航时构建您的网站后,您会看到问题
Preact 还没有填充 React v18 中的新钩子。您需要恢复新挂钩的使用。
您可以跟踪以下将挂钩添加到 Preact 的问题:https://github.com/preactjs/preact/pull/3510
旁注:你真的应该坚持使用一个库(开发中的 Preact 或生产中的 React)。根据环境在它们之间切换会使您极易 运行 出现您意想不到的小不一致。你的开发环境应该总是 best-effort 以匹配你的生产环境,所以如果这意味着使用 Preact,你也应该在开发中使用 Preact。
这是一个非常糟糕的做法,不知何故受到 NextJS 用户的欢迎。