时间戳

首页 > 解决方案 > 找不到模块：无法解析“./node_modules/@material-ui/core/IconButton”

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

问题描述

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

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

控制台错误：

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 (bootstrap:785)在 fn (bootstrap:150) 在 Module../src/App.js (App.css?498e:37) 在webpack_require (bootstrap:785) 在 fn (bootstrap:150) 在 Module../src/index.js (custom-mapbox-gl.css?2ca8:37) 在webpack_require (bootstrap:785) 在 fn (bootstrap:150) 在 Object.0 (serviceWorker.js:135) 在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，然后安装所需的包。

没有任何效果。

我的 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 包

有谁知道包的路径存储在哪里，所以我可以手动更改它？

标签： javascriptreactjsmaterial-ui

解决方案

尝试像这样编写导入语句

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

推荐阅读