Блог

Я установил create-react-app и material-ui/core и приступил к созданию простой кнопки.

После добавления кнопки в файл приложения и использования команды npm start я ожидал бы, что кнопка отобразится в браузере, вместо этого я получаю неверный вызов с ошибкой.

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

Вот простая кнопка: App.js

 import {Button} from '@material-ui/core';  export default function App() {  return (  lt;div className="App"gt;  lt;Buttongt;Click Melt;/Buttongt;  lt;/divgt;  ); }  

Index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App';  ReactDOM.render(  lt;App /gt;,  document.getElementById('root') );  

Index.html

 lt;div id='root'gt;lt;/divgt;  

А вот файл package.json (зависимости показаны здесь только для уменьшения длины кода):

 {  "name": "mui-play",  "version": "0.1.0",  "private": true,  "dependencies": {  "@testing-library/jest-dom": "^5.15.1",  "@testing-library/react": "^11.2.7",  "@testing-library/user-event": "^12.8.3",  "react": "^17.0.2",  "react-dom": "^17.0.2",  "react-scripts": "4.0.3",  "web-vitals": "^1.1.2"  }  

Решено: Возникла проблема с зависимостями, я узнал, что даже если вы устанавливаете пакет npm, вы все равно должны перейти к терминалу в редакторе исходного кода и установить зависимость в файл package.json. Вот исправленный файл, который позволяет отображать кнопку в браузере: package.json:

 "name": "mui-play",  "version": "0.1.0",  "private": true,  "dependencies": {  "@material-ui/core": "^4.12.3",  "@testing-library/jest-dom": "^5.15.1",  "@testing-library/react": "^11.2.7",  "@testing-library/user-event": "^12.8.3",  "react": "^17.0.2",  "react-dom": "^17.0.2",  "react-scripts": "4.0.3",  "web-vitals": "^1.1.2"  }  

Строка "@material-ui/core": "^4.12.3", была добавлена, чтобы пакет мог использовать зависимость.

попробуйте добавить нужные пакеты вручную, а затем запустить npm install их на терминале