Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui] v6 does not export GridProps and GridMapType #43686

Closed
heath-freenome opened this issue Sep 10, 2024 · 5 comments · Fixed by #43717
Closed

[material-ui] v6 does not export GridProps and GridMapType #43686

heath-freenome opened this issue Sep 10, 2024 · 5 comments · Fixed by #43717
Assignees
Labels
bug 🐛 Something doesn't work component: Grid The React component. package: material-ui Specific to @mui/material typescript v6.x

Comments

@heath-freenome
Copy link
Contributor

heath-freenome commented Sep 10, 2024

Steps to reproduce

Steps:

  1. Create a new .tsx file
  2. Try to import GridProps or GridMapType from @mui/material
  3. See TS error when running tsc

Current behavior

I'm attempting to upgrade to MUI v6 and my code is currently using GridProps and GridMapType. When I upgraded and ran type checking I see the following:

file1.tsx:3:10 - error TS2724: '"@mui/material"' has no exported member named 'GridProps'. Did you mean 'Grid2Props'?

3 import { GridProps, GridTypeMap } from '@mui/material';
           ~~~~~~~~~

file1.tsx:3:21 - error TS2724: '"@mui/material"' has no exported member named 'GridTypeMap'. Did you mean 'Grid2TypeMap'?

3 import { GridProps, GridTypeMap } from '@mui/material';
                      ~~~~~~~~~~~

Expected behavior

I expect that the types provided for Grid are still exported from @mui/material since is has only been deprecated.

Context

No response

Your environment

npx @mui/envinfo

System:
OS: macOS 14.5
Binaries:
Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
pnpm: 9.0.6 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 128.0.6613.120
Edge: Not Found
Safari: 17.5
npmPackages:
@emotion/react: 11.13.3 => 11.13.3
@emotion/styled: 11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.0.2
@mui/icons-material: 6.0.2 => 6.0.2
@mui/material: 6.0.2 => 6.0.2
@mui/private-theming: 6.0.2
@mui/styled-engine: 6.0.2
@mui/system: 6.0.2 => 6.0.2
@mui/types: 7.2.16
@mui/utils: 6.0.2 => 6.0.2
@mui/x-date-pickers: 7.16.0 => 7.16.0
@mui/x-internals: 7.16.0
@types/react: 18.3.5 => 18.3.5
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
typescript: 5.6.2 => 5.6.2

Search keywords: GridProps

@heath-freenome heath-freenome added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 10, 2024
@heath-freenome heath-freenome changed the title MUI v6 does not export GridProps and GridMapType Breaking change: MUI v6 does not export GridProps and GridMapType Sep 10, 2024
@heath-freenome
Copy link
Contributor Author

Looking at the index.ts for @mui/material I see that the following is missing after the export of Grid at line 154

export * from `./Grid`;

@heath-freenome
Copy link
Contributor Author

Digging deeper, I see that there are a common set of named types GridDirection, GridSpacing, GridWrap and GridSize in both files. The challenge is that GridSize has a different value for Grid2 than Grid. Which seems like a small compatibility issue.

@siriwatknp siriwatknp added bug 🐛 Something doesn't work component: Grid The React component. typescript package: material-ui Specific to @mui/material v6.x and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 10, 2024
@DiegoAndai DiegoAndai moved this to Selected in Material UI Sep 11, 2024
@DiegoAndai DiegoAndai moved this from Selected to In progress in Material UI Sep 11, 2024
@DiegoAndai DiegoAndai changed the title Breaking change: MUI v6 does not export GridProps and GridMapType [material-ui] v6 does not export GridProps and GridMapType Sep 11, 2024
@DiegoAndai
Copy link
Member

Thanks for the report, @heath-freenome; I opened a PR to fix this: #43717.

As you mentioned, there's an overlap in the Grid and Grid2 types. Because of this, and to avoid opening a bigger can of worms, I only added back the GridProps and GridMapType types. Can you confirm if this fixes your issue? You can test it by pointing the @mui/material package to the linked PRs build in your package.json:

-"@mui/material": "latest",
+"@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/a140ce99/@mui/material",

Please let me know, and thanks for the investigation 😊

@heath-freenome
Copy link
Contributor Author

heath-freenome commented Sep 12, 2024

Thanks for the quick turn around. Yes it fixes the problem!

@github-project-automation github-project-automation bot moved this from In progress to Done in Material UI Sep 13, 2024
Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @heath-freenome! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: Grid The React component. package: material-ui Specific to @mui/material typescript v6.x
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants