@mui/[email protected] type exports do not match @mui/[email protected]

[pjjanak]

Steps to reproduce

Link to live example: https://stackblitz.com/~/github.com/pjjanak/mui-typescript-bug?file=package.json

Steps:

1. Visit live example
2. Note output in terminal

Current behavior

When running tsc on the above repository the following is output

yarn typescript
yarn run v1.22.19
$ tsc
node_modules/@mui/material/utils/memoTheme.d.ts:6:64 - error TS2694: Namespace '"/Users/pjanak/development/workarea/js-modules/mui-typescript-bug/node_modules/@mui/styled-engine/index"' has no exported member 'ComponentSelector'.

6 }) => 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;
                                                                 ~~~~~~~~~~~~~~~~~

node_modules/@mui/material/utils/memoTheme.d.ts:6:154 - error TS2694: Namespace '"/Users/pjanak/development/workarea/js-modules/mui-typescript-bug/node_modules/@mui/styled-engine/index"' has no exported member 'SerializedStyles'.

6 }) => 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;
                                                                                                                                                           ~~~~~~~~~~~~~~~~

node_modules/@mui/system/memoTheme.d.ts:11:64 - error TS2694: Namespace '"/Users/pjanak/development/workarea/js-modules/mui-typescript-bug/node_modules/@mui/styled-engine/index"' has no exported member 'ComponentSelector'.

11 }) => 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;
                                                                  ~~~~~~~~~~~~~~~~~

node_modules/@mui/system/memoTheme.d.ts:11:154 - error TS2694: Namespace '"/Users/pjanak/development/workarea/js-modules/mui-typescript-bug/node_modules/@mui/styled-engine/index"' has no exported member 'SerializedStyles'.

11 }) => 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;
                                                                                                                                                            ~~~~~~~~~~~~~~~~


Found 4 errors in 2 files.

Errors  Files
     2  node_modules/@mui/material/utils/memoTheme.d.ts:6
     2  node_modules/@mui/system/memoTheme.d.ts:11
error Command failed with exit code 2.

Expected behavior

No errors are output.

Context

It would seem that styled-engine has new/different exports as of version 6.1.4 than styled-engine-sc at the same version. As a result, typescript fails to compile any project that uses styled-engine-sc in place of styled-engine.

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.7
  Binaries:
    Node: 20.18.0 - /opt/homebrew/opt/node@20/bin/node
    npm: 10.8.2 - /opt/homebrew/opt/node@20/bin/npm
    pnpm: 7.28.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.101
    Edge: Not Found
    Safari: 18.0.1
  npmPackages:
    @mui/core-downloads-tracker:  6.1.4 
    @mui/material: ^6.1.4 => 6.1.4 
    @mui/private-theming:  6.1.4 
    @mui/styled-engine-sc:  6.1.4 
    @mui/system:  6.1.4 
    @mui/types:  7.2.18 
    @mui/utils:  6.1.4 
    @types/react: ^18.3.11 => 18.3.11 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    styled-components: ^6.1.13 => 6.1.13 
    typescript: ^5.6.3 => 5.6.3 

tsconfig can be found in linked repository

Search keywords: styled-engine-sc typescript

[mnajdova]

You haven't configured the tsconfig paths: https://github.com/mui/material-ui/blob/master/examples/material-ui-cra-styled-components-ts/tsconfig.paths.json

Can you check if the issue still persists if this is included in the tsconfig? That type is added in the @mui/styled-engine but it's used only internally si it shouldn't affect @mui/styled-engine-sc.