React Dependency Conflict Version 18.0 с Material-UI

Я пробовал все предложения здесь, но не работал. Проблема с установкой Material UI Icons npm: невозможно разрешить дерево зависимостей, ни этот ниже: проблемы с версией зависимости create-реагировать-приложение с React 18 Что можно сделать, чтобы решить эту проблему, пожалуйста? ниже мой package.lock.json.

     "name": "cashflowbr",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "cashflowbr",
      "version": "0.1.0",
      "dependencies": {
        "@emotion/react": "^11.9.0",
        "@emotion/styled": "^11.8.1",
        "@fontsource/roboto": "^4.5.5",
        "@mui/icons-material": "^5.6.2",
        "@mui/material": "^5.6.2",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.1.1",
        "@testing-library/user-event": "^13.5.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      }

Не могли бы вы прикрепить ошибки, которые вы получаете?

ckesplin 23.04.2022 02:47

Скомпилировано с проблемами: ОШИБКА X в ./src/components/NavBar.js 5:0-50 Модуль не найден: Ошибка: не удается разрешить '@material-ui/core/AppBar' в '/home/flavio/CashFlowBr/ ОШИБКА cashflowbr/src/components в ./src/components/NavBar.js 6:0-48 Модуль не найден: ошибка: не удается разрешить '@material-ui/core/ToolBar' в '/home/flavio/CashFlowBr ОШИБКА /cashflowbr/src/components в ./src/components/NavBar.js 7:0-53 Модуль не найден: Ошибка: не удается разрешить '@material-ui/core/Typography' в '/home/flavio/ CashFlowBr/cashflowbr/src/components'

Flavio Rocha 2018 23.04.2022 20:52

Мой файл NavBar.js: импортировать React из «реагировать»; импортировать {AppBar} из '@material-ui/core/AppBar'; импортировать панель инструментов из '@material-ui/core/ToolBar'; импортировать Typografy из '@material-ui/core/Typography'; const NavBar = () => { return( <div> <AppBar position="static"> <ToolBar> <Typografy variant="title" color="inherit"> CashFlowBR - Sistema de Gerenciamento Financeiro </Typografy> </ToolBar > </AppBar>

Flavio Rocha 2018 23.04.2022 20:54
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
3
179
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, вы пытаетесь импортировать компоненты MUI версии 4 при установке MUI версии 5.

Ваш импорт должен быть из @mui/material (версия 5), а не из @material-ui/core (версия 4).

Опция 1

Измените импорт, чтобы использовать установленную библиотеку (@mui/material), например:

import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

Вариант 2

Измените свой package.json, чтобы установить MUIv4.

Удалять:

"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
...
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.2",

... и добавить:

"@material-ui/core": "4.11.3",
"@material-ui/icons": "4.11.3",

Наконец, бегите npm install. Удалите папку node_modules, а затем npm install, если у вас возникнут проблемы после этого.

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