找不到模块：无法解析“./node_modules/@material-ui/core/IconButton”

Question

在浏览器中，我收到错误消息：

无法编译 ./src/components/layout/search/Searchbar.js 模块未找到：无法解析 'C:\Users\Ja\Desktop\INFA \ProjektInzynierski\Projekt\Engineering-Project\client\src\components\layout\search'

控制台错误：

map-contours.js:16 未捕获的错误：在 webpackMissingModule (map-contours.js:16) at Module../src/components/layout/search/Searchbar.js (map- contours.js:16) at webpack_require (bootstrap:785) at fn (bootstrap:150) at Module../src/components/layout/map/Map2.js (Navbar.js:13) at webpack_require (bootstrap:785)在 fn (bootstrap:150) at Module../src/App.js (App.css?498e:37) at webpack_require (bootstrap:785) at fn (bootstrap:150) at Module../src/index.js (custom-mapbox-gl.css?2ca8:37) at webpack_require (bootstrap:785) at fn (bootstrap:150) at Object.0 (serviceWorker.js:135) at webpack_require (bootstrap:785) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.chunk.js:1

在我将文件“Searchbar.js”位置从布局目录更改为布局/搜索目录后，出现了问题。

似乎编译器正在“C:\Users\Ja\Desktop\INFA\ProjektInzynierski\Projekt\Engineering-Project\client\src\components\layout\search”中搜索“@material-ui/core/IconButton”。

我已经尝试过什么来解决这个问题（随机顺序）：

1）重新安装@material-ui/core

2）纱线添加@material-ui/core

3）纱线添加@material-ui/core@next

4) 更新 npm install react react-dom

5) npm卸载@material-ui/core，并安装@material-ui/core

6) 删除整个 node_modules 和 npm install

7）从yarn.lock，package-lock.json中清除所有@material-ui，然后安装所需的包。

Nothing worked.

My 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"
  ]
}
}

The Component code:

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>
  );
}

it seems that the problem affects the whole @material-ui/core package not only the 'IconButton'

Does anyone know where the path for the package is stored so I could manually change it?

Answer 1

尝试像这样编写导入语句

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

参考：https : //material-ui.com/api/icon-button/

编辑

这实际上适用于您的所有导入，您可以参考 package.json 中指定的包名称

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

等等

编辑 #2

只是想指出另一件事。写进口如

import MyComponent from "./MyComponent.js";

将引用文件的默认导出，您可以随意命名。按照惯例，您希望将其命名为与组件、类或函数相同的名称，但将其命名为其他名称不会导致错误：

import UnconventionallyNamedComponent from "./MyComponent.js";

您可以通过将导入名称括在括号中来导入常规导出，但它必须完全匹配或使用带有“as”的别名

// MyList.js

export function sortListByName(list) {
return list.sort((a,b) => {
    if (a.name < b.name) { return -1; }
    if (a.name > b.name) { return 1; }
    return 0;
})}

const MyList = (props) => {
const sortedList = sortListByName(props.list);
return (
    <ul>
        {sortedList.map(item => <li>{item}</li>)}
    </ul>
)};

export default MyList;




// MyComponent.js

import MyList from "./MyList";
import {sortListByName} from "./MyList";
// or by renaming it with alias
import {sortListByName as sort} from "./MyList";