Type error importing @mui/styled-engine from @mui/material using skipLibCheck: false

[Methuselah96]

Search keywords

type error missing dependency

Latest version

• I have tested the latest version

Steps to reproduce

Steps:

1. Start a TypeScript project with @mui/material using a strict package manager (e.g., pnpm or Yarn PnP) and with skipLibCheck set to false

Current behavior

Type error:

./node_modules/@mui/material/utils/memoTheme.d.ts(4,14): error TS2307: Cannot find module '@mui/styled-engine' or its corresponding type declarations.
./node_modules/@mui/material/utils/memoTheme.d.ts(6,42): error TS2307: Cannot find module '@mui/styled-engine' or its corresponding type declarations.
./node_modules/@mui/material/utils/memoTheme.d.ts(6,91): error TS2307: Cannot find module '@mui/styled-engine' or its corresponding type declarations.
./node_modules/@mui/material/utils/memoTheme.d.ts(6,132): error TS2307: Cannot find module '@mui/styled-engine' or its corresponding type declarations.
./node_modules/@mui/material/utils/memoTheme.d.ts(6,180): error TS2307: Cannot find module '@mui/styled-engine' or its corresponding type declarations.
./node_modules/@mui/material/utils/memoTheme.d.ts(6,221): error TS2307: Cannot find module '@mui/styled-engine' or its corresponding type declarations.

This is caused by the fact that @mui/material references @mui/styled-engine, but does not have a dependency on it.

Expected behavior

No type error

Context

N/A

Your environment

npx @mui/envinfo

"@mui/material": "^6.1.3"

[siriwatknp]

Strange, Material UI import memoTheme from @mui/system (which is a direct dependency), not @mui/styled-engine, even though the @mui/system reexports it from @mui/styled-engine.

https://github.com/mui/material-ui/blob/master/packages/mui-material/src/utils/memoTheme.ts#L1

[siriwatknp]

Ah, it's the memoTheme.d.ts after the build:

import { Theme } from '../styles/createTheme';
declare const memoTheme: (styleFn: (props: {
    theme: Theme;
}) => import("@mui/styled-engine").CSSInterpolation) => (props: {
    theme: Theme;
}) => string | number | boolean | import("@mui/styled-engine").ComponentSelector | import("@mui/styled-engine").Keyframes | import("@mui/styled-engine").SerializedStyles | import("@mui/styled-engine").CSSObject | import("@mui/styled-engine").ArrayCSSInterpolation | null;
export default memoTheme;