React 18中ReactDOM.render不再支持，替换createRoot仍报错求助

在React 18项目中，已将ReactDOM.render替换为createRoot，但依然收到"ReactDOM.render不再支持，需使用createRoot替代"的报错。项目通过Laravel的index.blade.php渲染app.jsx，相关代码如下：

app.jsx #

import React from 'react';
import { createRoot } from "react-dom/client";
import localforage from 'localforage';
import { createStore } from 'polotno/model/store';
import { unstable_setRemoveBackgroundEnabled } from 'polotno/config';
import './src/components/app.css'
import App from './src/components/App';


unstable_setRemoveBackgroundEnabled(true);

const store = createStore({ key: 'nFA5H9elEytDyPyvKL7T' });

localforage.getItem('polotno-state', function (err, json) {
    if (json) {
        store.loadJSON(json);
    }
    if (!store.pages.length) {
        store.addPage();
    }
});

store.on('change', () => {
    try {
        const json = store.toJSON();
        localforage.setItem('polotno-state', json);
    } catch (e) { }
});

const container = document.getElementById("polotnoApp");
const root = createRoot(container);
    
root.render(
    <App store={store} />
);

package.json #

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.27.2",
        "esbuild": "^0.15.12",
        "laravel-vite-plugin": "^0.6.1",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.1.4"
    },
    "dependencies": {
        "@meronex/icons": "^4.0.0",
        "@vitejs/plugin-react": "^2.1.0",
        "bootstrap": "^5.2.2",
        "dotenv": "^16.0.3",
        "file-saver": "^2.0.5",
        "jszip": "^3.10.1",
        "localforage": "^1.10.0",
        "polotno": "^1.1.1",
        "polotno-node": "^1.0.0",
        "qrcode": "^1.5.1",
        "react": "^18.2.0",
        "react-bootstrap": "^2.5.0",
        "react-dom": "^18.2.0",
        "react-toastify": "^9.0.8"
    }
}

index.blade.php #

@extends('layouts.app')
@section('content')
    @include('partials.header')
    <div class="app-body">
        @include('partials.left_sidebar')
        <main class="main-content"  >
            <div id="polotnoApp"></div>
        </main>
    </div>
    @include('partials.footer')
@endsection

排查与解决方向 #

1. 第三方库兼容性问题
   当前使用的polotno@1.1.1可能内部仍在调用ReactDOM.render，未适配React 18。尝试升级该库到最新版本，或查看其官方文档确认React 18支持情况。

2. DOM容器与重复渲染检查
   确保#polotnoApp元素在createRoot调用时已经存在于DOM中，可添加判断避免无效渲染：

   const container = document.getElementById("polotnoApp");
   if (!container) return;
   const root = createRoot(container);
   root.render(<App store={store} />);
   

   同时检查项目其他文件（如layouts.app中的脚本）是否存在额外的ReactDOM.render调用。

3. 清理缓存并重新构建
   执行以下命令清理Vite缓存，避免旧代码残留：

   rm -rf node_modules/.vite
   npm run build
   

内容的提问来源于stack exchange，提问作者David-JSON