Question

在浏览器中，出现错误：

编译失败 ./src/components/layout/search/Searchbar.js 找不到模块：无法解析'C：\ Users \ Ja \ Desktop \ INFA \ ProjektInzynierski \ Projekt \ Engineering-Project \ client \ src \ components \ layout中的'./node_modules/@material-ui/core/IconButton' \ search'

控制台错误：

map-contours.js：16未捕获的错误：找不到模块'./node_modules/react' 在webpackMissingModule（map-contours.js：16）在Module ../ src / components / layout / search / Searchbar.js（map-contours.js：16）位于 webpack_require （引导程序：785）在fn（bootstrap：150）在Module ../ src / components / layout / map / Map2.js（Navbar.js：13）位于 webpack_require （引导程序：785）在fn（bootstrap：150）在Module ../ src / App.js（App.css？498e：37）位于 webpack_require （引导程序：785）在fn（bootstrap：150）在Module ../ src / index.js（custom-mapbox-gl.css？2ca8：37）位于 webpack_require （引导程序：785）在fn（bootstrap：150）在Object.0（serviceWorker.js：135）位于 webpack_require （引导程序：785）在checkDeferredModules（bootstrap：45）在Array.webpackJsonpCallback [推动时]（bootstrap：32）在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，然后安装所需的软件包。

什么都没有。

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

问题似乎不仅影响了“ IconButton”，而且还影响了整个@ material-ui / core软件包

有人知道软件包的路径存储在哪里，以便我可以手动更改它吗？

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";

以此类推

Answer 2

我遇到了同样的错误，并且在安装 npm install @material-ui/core 并重新启动实时服务器后能够解决它

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

2 个答案: