Интерфейс Material UI, Next12, React 18

#material-ui

#reactjs #npm #материал-пользовательский интерфейс #next.js #рендеринг на стороне сервера

Вопрос:

Я пытаюсь опробовать последнюю версию NextJS (версия 12), чтобы предоставить моему проекту доступ к SSR ServerComponents и потоковой передаче Http.

MaterialUI отлично работает с Next 12.0.7 и React 17 (устанавливается с помощью npx create-next-app@latest)

Когда я делаю

npm install react@beta react-dom@beta

Затем

npm install @mui/material @mui/styled-engine-sc styled-components --save

Дает

 (base) marcfielding@MBP meta-ui % npm install @mui/material @mui/styled-engine-sc styled-components --save

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: meta-ui@undefined
npm ERR! Found: react@18.0.0-rc.0-next-f2a59df48-20211208
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0-beta-24dd07bd2-20211208" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from @mui/material@5.2.3
npm ERR! node_modules/@mui/material
npm ERR!   @mui/material@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/marcfielding/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/marcfielding/.npm/_logs/2021-12-09T16_48_20_688Z-debug.log
 

Это просто ожидание, пока MUI догонит? Или есть версия, которую я могу установить, следуя инструкциям, приведенным здесь ранее?

Комментарии:

1. Приведенный ниже ответ @Summer довольно верен. В NPM @ 7 есть дурацкая система разрешения одноранговых зависимостей, вы можете прочитать здесь немного больше ostack.cn/?qa=538022 .

Ответ №1:

Если вы не возражаете против использования yarn, вот репозиторий, который вы можете использовать с нужными вам deps: https://github.com/MiniDeathStar/material-ui-next12-react-18

Если вы хотите использовать npm, вы можете запустить:

 npm install @mui/material @mui/styled-engine-sc styled-components --legacy-peer-deps
 

Mui не должен нарушаться с помощью React@18. Я отлично использовал их вместе. Однако Npm — это привередливый менеджер пакетов, поэтому я буду выступать за Yarn 3 всякий раз, когда у меня будет такая возможность.

Комментарии:

1. Хейя Саммер, спасибо за это и приношу извинения за медленный ответ — сегодня я снова за своим столом и протестирую это, большое спасибо!

2. Не беспокойтесь о том, что срок действия вознаграждения истекает, я все равно разберу его для вас — просто был безумно занят в первый рабочий день, я скоро вернусь к нему 🙂

3. Хея, так что Пряжа была способом, которым я заставил это работать, возможно, стоит отредактировать этот ответ, чтобы отразить это, извините, что я был медленным какое-то время. Я почти уверен, что я просто установил YARN, а не что-то особенное

4. @MrkFldig Рад, что это сработало! Это была классическая пряжа или пряжа v3? Версия NextJS, когда я писал ответ, была несовместима с функцией PnP Yarn 3, поэтому мне пришлось установить для nodeLinker значение node-modules . Мне не хотелось писать такие подробные инструкции, поэтому я просто сделал репо. Classic yarn не использует PnP, поэтому он работал бы из коробки. Но текущая версия NextJS (12.1) поддерживает PnP, поэтому Yarn 3 теперь тоже работает из коробки.

5. Вы знаете, что я не могу вспомнить, но я буквально собираюсь развернуть новый проект, поэтому я скоро вернусь к вам!