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

[HofmannZ]

• 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:

1. Add a DatePicker form the lab
2. Build your project using tsc
3. 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 

[HofmannZ]

Extra context:

[mnajdova]

@HofmannZ can you please create codesandbox project or reference github project where we can see the repro? That would help us identify the issue faster.

[oliviertassinari]

Type seems OK Types are wrong: https://unpkg.com/browse/@material-ui/[email protected]/ClockPicker/ClockPicker.d.ts

[HofmannZ]

@oliviertassinari at line 61?

[oliviertassinari]

The solution is likely to make the type explicit, as we did to solve mui/mui-x#573.

[oliviertassinari]

Same issue with https://unpkg.com/browse/@material-ui/[email protected]/Timeline/Timeline.d.ts.

[HofmannZ]

Also: ClockPicker, DayPicker, PickersDay and YearPicker.

[oliviertassinari]

@HofmannZ It seems that the issue can be resolved by not using createStyles. For instance #24132 we get the correct generated .d.ts. I have tested it with:

cd packages/material-ui-lab
yarn build:types
cat build/ClockPicker/ClockPicker.d.ts

Do you want to migrate the components suffering from this issue to the approach :)? (unless somebody has a better solution, of course)

Having to manually define the classes should also help with the migration to emotion.

[eps1lon]

Got a minimal repro with https://github.com/eps1lon/ts-monorepo-type-import-paths that I reported in microsoft/TypeScript#42155. In the meantime we'll need to detect and fix the symptoms.

Update, the issue opened was reported as a duplicate of microsoft/TypeScript#39117.

[Philipp91]

Over in #24271 I reported a related issue with the same error/phenomenon. IIUC, here the workaround/solution is to stop depending on createStyles. In my case, I need to import some things from the @material-ui/lab/internal directory, which then causes these issues. Some of the files have the error not with material-ui-styles but with material-ui (core). E.g. this file: https://unpkg.com/browse/@material-ui/[email protected]/internal/svg-icons/Pen.d.ts

I don't think that removing the dependency on createStyles will solve the issue there. Since there's already quite a number of scripts to move and copy files around, maybe we could just add a carefully crated sed command to replace those paths until the issues is fixed on the TypeScript end (microsoft/TypeScript#39117 nowadays)?

[Philipp91]

Can we do the same workaround suggested there?

[oliviertassinari]

The TypeScript team might just have fixed the issue in microsoft/TypeScript#39117.

[Philipp91]

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).

[eps1lon]

Does somebody have a cloneable repro that I can use for testing?

[Philipp91]

If you're a bit patient while it's being downloaded, you can just use the material-ui repository itself. Roughly:

git clone https://github.com/mui-org/material-ui.git
cd material-ui
git checkout next
yarn install
cd packages/material-ui-lab
yarn run build:types
grep -E -nr 'import\("\.\./\.\./' build

Oh I see you already sent a PR 👍

[eps1lon]

grep -E -nr 'import("../../' build

I meant a codebase that is using Material-UI and failing.