material-ui: Cannot find module '../../../material-ui-styles/src' or its corresponding type declarations.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The typings of components inside the lab are referencing import("../../../material-ui-styles/src"). The components inside the core are fine, so likely not something with our setup.

Expected Behavior 🤔

The typings of components in the lab should be referencing @material-ui/styles.

Steps to Reproduce 🕹

{
  "compilerOptions": {
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "baseUrl": "src",
    "declaration": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "pretty": true,
    "sourceMap": true,
    "strict": true,
    "target": "es2020",
    "resolveJsonModule": true,
    "rootDir": "src",
    "outDir": "build",
    "incremental": true
  },
  "include": ["src/**/*"],
  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"]
}

Steps:

Add a DatePicker form the lab
Build your project using tsc
Get error Cannot find module '../../../material-ui/src' or its corresponding type declarations.

Context 🔦

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: macOS 11.1
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Edge: 87.0.664.66
    Firefox: Not Found
    Safari: 14.0.2
  npmPackages:
    @emotion/react: ^11.1.4 => 11.1.4 
    @emotion/styled: ^11.0.0 => 11.0.0 
    @material-ui/core: ^5.0.0-alpha.20 => 5.0.0-alpha.20 
    @material-ui/icons: ^5.0.0-alpha.20 => 5.0.0-alpha.20 
    @material-ui/lab: ^5.0.0-alpha.20 => 5.0.0-alpha.20 
    @material-ui/styled-engine:  5.0.0-alpha.20 
    @material-ui/styles:  5.0.0-alpha.20 
    @material-ui/system:  5.0.0-alpha.20 
    @material-ui/types:  5.1.2 
    @material-ui/unstyled:  5.0.0-alpha.20 
    @material-ui/utils:  5.0.0-alpha.20 
    @types/react: ~17 => 17.0.0 
    react: ~17 => 17.0.1 
    react-dom: ~17 => 17.0.1 
    typescript: ^4.1.3 => 4.1.3

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 16 (13 by maintainers)

Most upvoted comments

The fix doesn’t work for us (yet). I tested with the latest nightly release of TypeScript (version 4.2.0-dev.20210111), which should have the fix. But the output still contains things like import("../../../material-ui/src/OverridableComponent").

The fix is based on a heuristic that only triggers when there’s a regular import of the same module at the top of the file. E.g. to fix the import above, we would need a top-level statement import {OverridableComponent} from '@material-ui';. And the import isn’t there (e.g. not here) because the symbol is only used implicitly (on the InputAdornmentProps).

Philipp91 on Jan 11, 2021

@oliviertassinari at line 61?

HofmannZ on Dec 24, 2020