Блог

Я создаю приложение, используя react-cli, затем импортирую material-UI, просто простой код

App.js

 import React from 'react';
import logo from './logo.svg';
import './App.css';
import Appbar from './Componets/Appbar/Appbar'

function App() {
  return (
    <div className="App">
        <Appbar />
    </div>
  );
}

export default App;
  

Appbar.js

 import React from 'react';
import {AppBar,Toolbar,Typography } from '@material-ui/core'
function Appbar(){
    return (
        <AppBar>
            <Toolbar>
                <Typography variant="h5" color="inherit">
                    BLACKPINK HOUSE
                </Typography>
            </Toolbar>
        </AppBar>
    )
}
//before
export default AppBar

//after 
export default Appbar
  

Я также изменяю зависимости узла

 {
  "name": "news",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "16.13.0",
    "react-dom": "16.13.0",
    "react-scripts": "3.4.3"
 },
  

Он просто не может запуститься, если я удалю панель приложений внутри приложения, оно запустится

сообщение об ошибке выглядит следующим образом

Ошибка: недопустимый вызов перехвата. Перехваты могут быть вызваны только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

1. Возможно, у вас несовпадающие версии React и средства визуализации (например, React DOM)
2. Возможно, вы нарушаете правила использования перехватов
3. У вас может быть более одной копии React в одном приложении

Module../src/index.js C:/Users/Administrator/Desktop/MaterialUI/news/src/index.js:7

    4 | import App from './App';
   5 | import * as serviceWorker from './serviceWorker';
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,
  

webpack_require
C:/Users/Administrator/Desktop/MaterialUI/news/webpack/bootstrap:784

   781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
  

fn
C:/Users/Administrator/Desktop/MaterialUI/news/webpack/bootstrap:150

   147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
  

webpack_require
C:/Users/Administrator/Desktop/MaterialUI/news/webpack/bootstrap:784

   781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
  

Checkdeferredмодули
C:/Users/Administrator/Desktop/MaterialUI/news/webpack/bootstrap:45

   42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
  

Массив.webpackJsonpCallback [как push]
C:/Users/Administrator/Desktop/MaterialUI/news/webpack/bootstrap:32

   29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var resu<