javascript - 找不到模块 : Can't resolve './node_modules/@material-ui/core/IconButton'

Question

在浏览器中，我收到错误:

Failed to compile ./src/components/layout/search/Searchbar.js Module not found: Can't resolve './node_modules/@material-ui/core/IconButton' in 'C:\Users\Ja\Desktop\INFA\ProjektInzynierski\Projekt\Engineering-Project\client\src\components\layout\search'

控制台错误:

map-contours.js:16 Uncaught Error: Cannot find module './node_modules/react' at 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) at 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) yarn 添加@material-ui/core

3) yarn 添加@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，然后安装所需的包。

没有任何效果。

我的 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';

引用: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";