Add support for the `top-level-imports` codemod for MUI v5

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently the top-level-imports codemod does not support MUI v5, while the current docs still link to it. The top-level-imports codemod should support MUI v5.

Examples 🌈

I have tried running the v4 codemod on a v5 codebase without success. I also tried setting two jscodeshift args --importModule and --targetModule to @mui/material, like this:

npx @mui/codemod v4.0.0/top-level-imports myfile.tsx --jscodeshift='--importModule="@mui/material" --targetModule="@mui/material"'

This results in:

Error: Cannot find module '"@mui/material" --targetModule="@mui/material"'

The error message appears as if the two jscodeshift args were concatenated to one arg. This may well be an error on my part, so please let me know if this should work. Setting only one of the args like --jscodeshift='--importModule="@mui/material" still results in the same error though: Error: Cannot find module '"@mui/material"'.

I found a related issue (https://github.com/mui/material-ui/issues/30907), but it talks about the babel-plugin-import, not the codemod.

Motivation 🔦

I have a large codebase with several submodule imports per file like this:

import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

I want to transform these imports into top-level imports like this without having to refactor each file manually:

import { MenuItem, InputLabel, FormControl, Select } from '@mui/material';

[mnajdova]

@greengiraffe sorry for the delay, had to run on a meeting 😄 It should be fixed with https://github.com/mui/material-ui/pull/31308 (I’ve tested locally, but would be great if you can double check). You can fetch that branch, build the @mui/codemod package locally, by going in the folder and running yarn build and then you can test it with:

node D:\workspace\mui\packages\mui-codemod\build\codemod.js v5.0.0\top-level-imports ./src/App.js

You can replace the D:\workspace with your location 😃

The alternative is to wait for the build on the branch and test with the packages build on the PR.

[mnajdova]

Taking a look @greengiraffe