React 18.2.0报错：createRoot目标容器非DOM元素，求解决方案

核心错误原因 #

你遇到的Uncaught Error: createRoot(...): Target container is not a DOM element.，根源是**createRoot要求传入原生DOM元素，但你传入的是jQuery对象**，而非真实的DOM节点。

具体修复步骤 #

• 转换jQuery对象为原生DOM元素：jQuery选择器返回类数组集合，通过[0]可取出对应的原生DOM节点
• 补充缺失的模块导入：User组件使用了useForm但未导入，需先安装react-hook-form并引入对应方法
• 修正JSX语法问题：React中JSX需用className替代class，且所有标签必须闭合（包括input这类自闭合标签）

修复后的完整代码 #

main.js #

import React from 'react';
import { createRoot } from 'react-dom/client';
// 导入useForm（需先执行npm install react-hook-form）
import { useForm } from 'react-hook-form';

const User = (props) => {
  const {control, getValues, setValue} = useForm({
    defaultValues: props,
  });
  return (
    <React.Fragment>
      <UserSignin></UserSignin>
    </React.Fragment>
  );
};

const UserSignin = (props) => {
  return (
    <>
      <div className="form-group">
        <label htmlFor="exampleInputEmail1">Email address</label>
        <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
        <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div className="form-group">
        <label htmlFor="exampleInputPassword1">Password</label>
        <input type="password" className="form-control" id="exampleInputPassword1" placeholder="Password" />
      </div>
    </>
  );
};

window.$(() => {
  (() => {
    const user = window.$('#user');
    if (user.length) {
      // 将jQuery对象转为原生DOM元素
      const root = createRoot(user[0]);
      root.render(
        <User/>
      );
    }
  })();
});

HTML部分（无需修改） #

你的HTML结构没问题，只需确保脚本在DOM就绪后执行即可（已通过jQuery的$(function(){})实现）：

<form action="" method="POST" novalidate>
      <div id="user"></div>
</form>

内容的提问来源于stack exchange，提问作者kiran