Using a styled(Grid) results in an error from 'RegularBreakpoints'

[achendrick]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

import { styled, Grid } from '@mui/material';

export const StyledGrid = styled(Grid)(({ theme }) => ({}));

Doing the above is resulting in the following error
Exported variable 'StyledGrid' has or is using name 'RegularBreakpoints' from external module "{project_path}/node_modules/@mui/material/Grid/Grid" but cannot be named.

Expected behavior 🤔

If I export RegularBreakpoints the error goes away so I'd expect that or a similar solution.

Steps to reproduce 🕹

Steps:

1. Create a project with 5.8.4 of @mui/material
2. Create a file in the project that has the following code:

import { styled, Grid } from '@mui/material';

export const StyledGrid = styled(Grid)(({ theme }) => ({}));

Context 🔦

No response

Your environment 🌎

.tsconfig

{
  "compilerOptions": {
    "target": "ES2015",
    "outDir": "./dist/esm/",
    "strictNullChecks": true,
    "moduleResolution": "node",
    "allowJs": true,
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react",
    "baseUrl": "./src",
    "lib": ["es2015", "dom.iterable", "es2016.array.include", "es2017.object", "dom", "esnext"],
    "module": "ESNext",
    "removeComments": true,
    "alwaysStrict": true,
    "allowUnreachableCode": false,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "./dist/typings/",
    "downlevelIteration": true,
    "typeRoots": ["./src/typings", "./node_modules/@types", "../../node_modules/@types"],
    "types": ["jest", "node"],
    "skipLibCheck": true
  },
  "files": ["./src/index.tsx"],
  "include": ["./src/**/*"]
}

[rejetto]

I can confirm this (recent) problem. For the moment I'm workarounding it by forcing the type as ReactElement.

[achendrick]

@rejetto good idea 👍🏻, much better than just reverting to 5.8.3

I ended up going with export const StyledGrid = styled(Grid)(({ theme }) => ({})) as typeof Grid; which worked a little better for me.

[jooohyun]

Hmmm... I have created react project using vite.js (NOT create-react-app).
and I write the below code

import { styled, Grid } from '@mui/material';

export const StyledGrid = styled(Grid)(({ theme }) => ({}));

BUT, there are no error.

[mnajdova]

@jooohyun you are right, I can't repro - https://codesandbox.io/s/charming-colden-qgvwx5?file=/src/App.tsx

[rejetto]

I'm using CRA

[mnajdova]

@rejetto please share a codesandbox with a reproduction

[jooohyun]

https://codesandbox.io/s/kind-chatterjee-7bwd6w?file=/src/index.tsx

this is CRA(typescript) project. as you can see there are no errors.

[rejetto]

Sorry, I didn't notice I've been quite inaccurate.
My use case is a monorepo, containing a CRA app, but the problem is inside a lib that's actually built simply by tsc.

So this is where I hade to force the type
https://github.com/rejetto/hfs/blob/208df4891044728fa4de94e05492fe996227135e/mui-grid-form/src/StringStringField.ts#L93

And these are related configurations
https://github.com/rejetto/hfs/blob/main/mui-grid-form/package.json
https://github.com/rejetto/hfs/blob/main/mui-grid-form/tsconfig.json

Version of mui is actually found here, which I just checked it is 5.8.4

I'm sorry I'm not providing better information, but it may take long before I find the necessary time.
Any help is appreciated, nothing expected, and I can actually live with my workaround.
Thanks for all the rest, by the way

[mnajdova]

Sorry, but this is not enough info for us to look into. Please re-open the issue when there is a reproduction that we can look into.

[rejetto]

Sure!

I discovered the error disappears on my side when I disable declaration in my tsconfig.json.
This way I was able to give you this: https://codesandbox.io/s/dry-shadow-x950wv?file=/src/App.tsx
I just modified tsconfig.
It may take a while before the problem appears, so I'm adding also a screenshot (from codesandbox), just in case

Typescript needs the exported type to generate a valid .d.ts .
This makes me think the problem doesn't apply to building apps (generates js only), while applies to building libraries (js + d.ts).
Anyway, disabling declaration files doesn't seem to be an option for libraries.

At this very moment I ran out of time (rushing to work), and cannot proceed testing your proposed solution, but it seems fine to me.

[achendrick]

@rejetto is exactly right. You will not see this error if you don't also update your tsconfig.json to have "declaration": true

All that would need to be done to address this issue would be export interface RegularBreakpoints

[John-Dennehy]

Having the same issue in a UI package in a monorepo.

[r-hede]

@achendrick is exactly right!

All that needs to be done to fix this is to export the RegularBreakpoints interface.

https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Grid/Grid.d.ts#L22

[ZeeshanTamboli]

I've created a PR for it - #33751