client\"

【问题标题】：plugin:vite:import-analysis Failed to resolve import "react-dom/client" from "src/main.jsx"plugin:vite:import-analysis 无法从 \"src/main.jsx\" 解析导入 \"react-dom/client\"
【发布时间】：2023-02-07 13:52:23
【问题描述】：

我是 Vite 的新手。当我在构建应用程序后遇到错误时，我正在尝试使用 vite 设置我的反应应用程序。我正在使用 React18。下面是我的 main.jsx 文件

Main.jsx

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './App'
    import './index.css'

    ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
        <App />
      </React.StrictMode>
    )

【问题讨论】：

标签： reactjs tailwind-css vite

【解决方案1】：

我找到了问题的解决方案，希望这可以帮助那里的人。

我需要修复的文件是 main.jsx。

用这个变体替换 main.jsx 中的代码：

    import React from "react";
    import { render } from "react-dom";
    import App from "./App.jsx";

    const container = document.getElementById("root");
     render(
      <React.StrictMode>
        <App />
     </React.StrictMode>,
      container
    );

变化不大，但让我们回顾一下差异。首先，在第二行我们从 react-dom 导入渲染函数，而不是从 react-dom/client 导入 ReactDOM。其次，我们使用该渲染函数来渲染 App 组件，而不是使用新的 React 18 根 API 中的 createRoot。

该站点现在应该可以热重新加载，我们可以看到带有计数器的页面。如果没有，请重新启动服务器并重新加载页面。

【讨论】：