- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在浏览器中,我收到错误:
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'
有谁知道包的路径存储在哪里,以便我可以手动更改它?
最佳答案
试着像这样写你的导入语句
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";
关于javascript - 找不到模块 : Can't resolve './node_modules/@material-ui/core/IconButton' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58256989/
例如,我有一个父类Author: class Author { String name static hasMany = [ fiction: Book,
代码如下: dojo.query(subNav.navClass).forEach(function(node, index, arr){ if(dojo.style(node, 'd
我有一个带有 Id 和姓名的学生表和一个带有 Id 和 friend Id 的 Friends 表。我想加入这两个表并找到学生的 friend 。 例如,Ashley 的 friend 是 Saman
我通过互联网浏览,但仍未找到问题的答案。应该很容易: class Parent { String name Child child } 当我有一个 child 对象时,如何获得它的 paren
我正在尝试创建一个以 Firebase 作为我的后端的社交应用。现在我正面临如何(在哪里?)找到 friend 功能的问题。 我有每个用户的邮件地址。 我可以访问用户的电话也预订。 在传统的后端中,我
我主要想澄清以下几点: 1。有人告诉我,在 iOS 5 及以下版本中,如果您使用 Game Center 设置多人游戏,则“查找 Facebook 好友”(如与好友争夺战)的功能不是内置的,因此您需要
关于redis docker镜像ENTRYPOINT脚本 docker-entrypoint.sh : #!/bin/sh set -e # first arg is `-f` or `--some-
我是一名优秀的程序员,十分优秀!