Модуль не найден: не удается разрешить './node_modules/@material-ui/core/IconButton'

Question

В браузере я получаю сообщение об ошибке:

Не удалось скомпилировать ./src/components/layout/search/Searchbar.js Модуль не найден: Не удается разрешить './node_modules/@ material-ui / core / IconButton 'в' C: \ Users \ Ja \ Desktop \ INFA \ ProjektInzynierski \ Projekt \ Engineering-Project \ client \ src \ components \ layout \ search '

Консольошибка:

map-contours.js: 16 Uncaught Ошибка: не удается найти модуль './node_modules/react' в webpackMissingModule (map-contours.js: 16) в Module ../ src / components/layout/search/Searchbar.js (map-contours.js: 16) в webpack_require (bootstrap: 785) в fn (bootstrap: 150) в Module ../ src / components / layout / map /Map2.js (Navbar.js: 13) в webpack_require (начальная загрузка: 785) в fn (начальная загрузка: 150) в Module ../ src / App.js (App.css? 498e: 37) в webpack_require (начальная загрузка: 785) в fn (начальная загрузка: 150) в Module ../ src / index.js (custom-mapbox-gl.css? 2ca8: 37) в webpack_require (бутстрап: 785) в фн (бутстрап: 150) в Обиject.0 (serviceWorker.js: 135) в webpack_require (начальная загрузка: 785) в checkDeferredModules (начальная загрузка: 45) в Array.webpackJsonpCallback [как push] (начальная загрузка: 32) в main.chunk.js:1

Проблема возникла после того, как я изменил расположение файла "Searchbar.js" с макета dir на макет / каталог поиска.

Похоже, что компилятор ищет '@ material-ui / core / IconButton 'в' C: \ Users \ Ja \ Desktop \ INFA \ ProjektInzynierski \ Projekt \ Engineering-Project \ client \ src \ components \ layout \ search '.

Что я уже пытался решить эту проблему (в произвольном порядке):

1) Переустановите @ material-ui / core

2) пряжа add @ material-ui /core

3) добавление пряжи @ material-ui / core @ next

4) обновление npm установка реакции реагировать

5) npm uninstall @ material-ui / coreи установите @ material-ui / core

6) удалите все node_modules и npm install

7) очистите все @ material-ui от yarn.lock, package-lock.json и установитенеобходимый пакет после.

Ничего не работает.

Мой package.json:

{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@material-ui/core": "^4.0.0-rc.0",
  "@material-ui/icons": "^4.4.3",
  "d3-request": "^1.0.6",
  "immutable": "^4.0.0-rc.12",
  "react": "^16.10.2",
  "react-dom": "^16.10.2",
  "react-map-gl": "^5.0.11",
  "react-scripts": "3.1.1"
},
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
"eslintConfig": {
  "extends": "react-app"
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}
}

Код компонента:

import React from './node_modules/react';
import { makeStyles } from './node_modules/@material-ui/core/styles';
import Paper from './node_modules/@material-ui/core/Paper';
import InputBase from './node_modules/@material-ui/core/InputBase';
import IconButton from './node_modules/@material-ui/core/IconButton';
import SearchIcon from './node_modules/@material-ui/icons/Search';

const useStyles = makeStyles(theme => ({
}));

function searchMetchod() {
}

export default function CustomizedInputBase() {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <InputBase
        className={classes.input}
        placeholder="Szukaj Nazwisk"
        inputProps={{ 'aria-label': 'search google maps' }}
      />
      <IconButton className={classes.iconButton} aria-label="search" onClick={searchMetchod}>
        <SearchIcon />
      </IconButton>
    </Paper>
  );
}

кажется, чтопроблема затрагивает весь пакет @ material-ui / core, а не только 'IconButton'

Кто-нибудь знает, где хранится путь к пакету, чтобы я мог вручную изменить его?

Answer 1

попробуйте написать свои операторы импорта следующим образом:

import IconButton from '@material-ui/core/IconButton';
// or
import { IconButton } from '@material-ui/core';

ref: https://material -ui.com / api / icon-button /

Отредактируйте

это действительно касается всех ваших импортов, вы можете просто обратиться к имени пакета, как указано в package.json

import React from "react";
import _ from "lodash";

и так далее