Cannot find module '@material-ui/core'

Viewed 15629

I had a problem with importing "@material-ui/core" to my react/typescript/webpack app. Always when I ran

webpack --config webpack.config.js

it failed with error

Cannot find module '@material-ui/core'

The same error was also underlined in the Visual Studio Code.

My index.tsx looked like this

import React from "react";
import ReactDOM from 'react-dom';
import { Button } from "@material-ui/core";

function App() {
    return <Button>Hi dudes</Button>
}
ReactDOM.render(<App />, document.getElementById("root"));
3 Answers

yarn add @material-ui/core or npm i @material-ui/core fixed the issue for me.

Set tsconfig.json as below

{
    "compilerOptions": {
        "outDir": "./dist",
        "target": "es5",
        "lib": ["es6", "dom"],
        "module": "ES6",
        "jsx": "react",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "allowSyntheticDefaultImports": true,
        "allowJs": true
    },
    "exclude": [
        "dist"
    ]
}

allowJs made it importable and other fixed webpack build.

  • npm install @mui/material @emotion/react @emotion/styled

  • yarn add @mui/material @emotion/react @emotion/styled

fixed it for me.

Related