接下来js，不再支持ReactDom.render

Question

我刚刚用 Next 12 启动了一个新的 Next JS 应用程序。

我在浏览器中加载所有页面时遇到此错误：

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

下一个 js 的 ReactDom.render 在引擎盖下，我该如何解决这个错误？

Answer 1

只需运行该命令即可获取最新的 React 版本

npx create-next-app@latest

Answer 2

其实我也有同样的 problem/warning ,

在我的例子中，我在我的 next.js 应用程序中使用“react-toastify”，上下文 api，经过大量搜索...

我发现问题来自：

toast.configure() method

我在上下文 api 模块中使用它，而且我还找到了官方“react-toastify”文档，讨论了与上下文 api 一起使用时与此方法相关的一些问题，并且他们从新版本中删除了此方法。

这里是官方文档的link：

https://fkhadra.github.io/react-toastify/migration-v9#toastconfigure-removal

最后我通过以下步骤解决了我的问题：

1-从我的上下文 api 模块中删除 toast.configure() 。

2- 我没有使用 toast.configure() ，而是在“_app”模块中使用了“ToastContainer”组件“只需定义它，吐司就可以正常工作”，这是我的“_app.js模块“：

import { useEffect } from 'react';
import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.css';
import Nav from '../components/nav';
import Footer from '../components/footer'; 
import { AuthProvider } from '../my_utils/myContext/authcontext';



import { ToastContainer } from 'react-toastify';


function MyApp({ Component, pageProps }) {

    useEffect(() => {
        import ('bootstrap/dist/js/bootstrap.js')
        import ('react-toastify/dist/ReactToastify.css')
    }, []);


    return (
    <> 
    <AuthProvider> 
        <Nav />
        <div className="allButFooter ms-3 me-3"> 
            <Component {...pageProps} />
            <ToastContainer />

        </div>
        <Footer />
    </AuthProvider>
    </>
    )
}
export default MyApp

我不知道你的情况是否和我的情况一样，但我希望对你有所帮助。

Answer 3

对我来说确实是脉轮。您需要为 NextJS

安装最新的 Chakra ui

npm i @chakra-ui/react@2.0.0-next.3

Answer 4

如果您已更新到 React 18 并在 Next.js 应用程序中使用 custom server 设置，您也可能会收到此警告。

对于这种情况，此问题已在 PR 版本 12.1.7-canary.2 中得到解决。要在您的项目中修复它，只需更新到最新的金丝雀版本，或等待稳定的 v12.1.7 版本。

npm install next@canary

接下来js，不再支持ReactDom.render

Next js, ReactDom.render is no longer supported

javascript

reactjs

next.js