'Cannot find module '@material-ui/lab'

I am building a front-end page where I need @material-ui/lab. After installing the package with npm, I get a typescript error when compiling: TS2307: Cannot find module '@material-ui/lab' or its corresponding type declarations.

However, on my front, it returns an error, but I can see the compilation "worked" when clicking on closing the error dialog since I see the material-ui timeline.

Where does this error come from?

package.json

{
    "name": "front",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@emotion/react": "^11.5.0",
        "@emotion/styled": "latest",
        "@material-ui/core": "^4.12.4",
        "@material-ui/icons": "^4.11.3",
        "@material-ui/lab": "^4.0.0-alpha.61",
...
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}
reactjstypescriptnpmmaterial-ui


Solution 1:[1]

Just try this

import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

function App() {
  return <Button variant="contained">Hello World</Button>;
}

You need to import something like this

import Button from '@mui/material/Button';

Solution 2:[2]

You have to install the lab package: npm install @material-ui/lab

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ahmad Deploy
Solution 2 Chameera

Related Questions