Plugin:vite:import-analysis Не удалось разрешить импорт «react-dom/client» из «src/main.jsx»

Я новичок в 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

24.11.2022 10:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

254

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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
);

Изменилось не так уж много, но давайте рассмотрим различия. Во-первых, во второй строке мы импортируем функцию render из react-dom вместо импорта ReactDOM из react-dom/client. Во-вторых, мы используем эту функцию render для рендеринга компонента App, а не используем createRoot из нового корневого API React 18.

Теперь сайт должен перезагрузиться, и мы видим нашу страницу со счетчиком. Если нет, перезапустите сервер и перезагрузите страницу.

07.02.2023 06:32

Другие вопросы по теме

Запрещение элемента абсолютной позиции выходить за пределы экрана

Анимация размытия Tailwindcss

Как исправить дизайн Navbar в React ?? Изменился ли дизайн панели навигации в Tailwind?

Свойство flexbox, реагирующее на попутный ветер, не работает должным образом

Повторяющееся фоновое изображение для анимации в Tailwind

Попутный ветер приоритет css

Невозможно расширить: варианты TailwindCSS:

Laravel 8 Установка Tailwind CSS ModuleBuildError:

Можете ли вы изменить элемент монтирования NextJS или добавить классы в __next div?

Как я могу использовать Tailwind с помощью Sass на Vue

Plugin:vite:import-analysis Не удалось разрешить импорт «react-dom/client» из «src/main.jsx»

Ответы 1

Другие вопросы по теме

Похожие вопросы