Module not found: Can't resolve './node_modules/@material-ui/core/IconButton'

Question

In the browser, I get the error:

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'

Console error:

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

The issue occurred after I changed the file "Searchbar.js" location from layout dir to layout/search dir.

It seems that compiler is searching for '@material-ui/core/IconButton' in 'C:\Users\Ja\Desktop\INFA\ProjektInzynierski\Projekt\Engineering-Project\client\src\components\layout\search'.

What have I already tried to solve this problem (random order):

1) Reinstall @material-ui/core

2) yarn add @material-ui/core

3) yarn add @material-ui/core@next

4) update npm install react react-dom

5) npm uninstall @material-ui/core, and install @material-ui/core

6) delete whole node_modules and npm install

7) clean all @material-ui from yarn.lock, package-lock.json, and install needed package after.

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?

Matsomo Matsomo · Accepted Answer · 2019-10-06T12:09:07

try writing your import statements like this

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

ref: https://material-ui.com/api/icon-button/

Edit

this goes for all your imports actually, you can just refer to the package name as specified in package.json

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

and so on

Edit #2

Just wanted to point out another thing. Writing imports like

import MyComponent from "./MyComponent.js";

will refer to the file's default export and you can name it whatever you want. By convention you want to name it the same as your component, class or function, but naming it something else won't cause an error:

import UnconventionallyNamedComponent from "./MyComponent.js";

You can import regular exports by wrapping the import name in brackets, but it either has to be an exact match or use an alias with '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";

Module not found: Can't resolve './node_modules/@material-ui/core/IconButton'

2 Answers