0

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"]
}
Benjamin Rio
  • 652
  • 2
  • 17

2 Answers2

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';
Ahmad Deploy
  • 81
  • 1
  • 5
0

I found the same problem in an old project of mine, scratching my head a while an found the solution in this post Can't resolve '@material-ui/lab/Slider' in {path}

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

Leandro Laiño
  • 46
  • 4