[question] How to get v6 codemod to update files?

[conerye]

Order ID

331993142

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

we are migrating from MUI X v5 to v6. the data grid and time picker versions are updated, and we attempt to run the codemode using the command:
npx @mui/x-codemod v6.0.0/preset-safe src
BUT results show that no files have been changed:
Results:
0 errors
355 unmodified
0 skipped
0 ok

Why would this happen? What needs to be done to get the codemod to work?

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.54)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.12
    @mui/core-downloads-tracker:  5.14.7
    @mui/icons-material: ^5.14.6 => 5.14.6
    @mui/material: ^5.14.6 => 5.14.6
    @mui/private-theming:  5.14.6
    @mui/styled-engine:  5.14.6
    @mui/system: ^5.14.6 => 5.14.6
    @mui/types:  7.2.4
    @mui/utils:  5.14.6
    @mui/x-codemod: ^6.9.0 => 6.9.0
    @mui/x-data-grid:  6.12.0
    @mui/x-data-grid-premium: ^6.12.0 => 6.12.0
    @mui/x-data-grid-pro:  6.12.0
    @mui/x-date-pickers:  6.12.0
    @mui/x-date-pickers-pro: ^6.12.0 => 6.12.0
    @mui/x-license-pro: ^6.10.2 => 6.10.2
    @types/react:  18.0.14
    react: ^18.1.0 => 18.2.0
    react-dom: ^18.1.0 => 18.2.0
    typescript:  4.7.4

[LukasTy]

Hello, could you clarify your project folder structure and in which folder are you running the codemod? 🤔
If you are running it in your project root folder, it implies that all your source code lives in the src folder, is that correct?

Quite a few codemods rely on the fact that the components are imported from the @mui/x- package. Is this the case in your project? Or do you have wrapper components that you use throughout the project?

[conerye]

yes, I am running the codemod from the root folder and the source code is all in the src folder.
I have, for example, a file that has:

import { DataGridPremium, GridOverlay, gridClasses, useGridApiRef } from '@mui/x-data-grid-premium';
...

<DataGridPremium
components={{
// change the detail panel icons
DetailPanelExpandIcon: KeyboardArrowDownIcon,
DetailPanelCollapseIcon: KeyboardArrowUpIcon,
// allow for a custom table footer
Footer: customFooter || undefined,
// allow for a text message to be added to the grid loading overlay
LoadingOverlay: loadingMessage ? CustomGridLoadingOverlay : undefined,
// change the grid overlay text message when there are no rows to display
NoResultsOverlay: CustomGridOverlay,
NoRowsOverlay: CustomGridOverlay,
// enable the custom toolbar
Toolbar: disableToolbar ? undefined : CustomTableToolbar,
}}
componentsProps={{
footer: footerProps,
loadingOverlay: loadingMessage && { message: loadingMessage },
noResultsOverlay: { message: noFilteredDataMsg },
noRowsOverlay: { message: noDataMsg },
pagination: {
showFirstButton: true,
showLastButton: true,
},
row: onRowRightClick && {
onContextMenu: handleRowRightClick,
},
toolbar: {
actionInputs,
actionsMenu,
disableColumnSelector,
disableExport,
disableQuickFilter,
name,
onHelp,
userName,
},
}}
disableColumnSelector={disableColumnSelector}
disableRowGrouping
density="compact"
experimentalFeatures={{ newEditingApi: true }}
rows={rows}
onRowDoubleClick={onRowDoubleClick ? handleRowDoubleClick : undefined}
// keep track of rows that are selected
onSelectionModelChange={handleSelectionModelChange}
selectionModel={selectedRowIds}
// show grid lines
showCellRightBorder
showColumnRightBorder
/>

I expected to see changes in this file...

[LukasTy]

I've tried running the codemod on your example in an isolated project and it successfully generated changes:

Could you maybe provide a minimal reproduction example, where this problem happens?
Maybe you could create a repository or at least provide the full component file with sensitive and unimportant data removed?

[conerye]

I can't provide the full component file... but the snippet above is the wrapper component, so now that I am understanding better how the codemods work, I'm realizing this would probably be the only file that would get changed and I will have to manually change the others. so, I guess I will just manually change this one too. bummer
thanks for trying to help

[LukasTy]

Sorry to hear that your experience with the "codemods" wasn't good.
Yes, you are correct, if you are using a wrapper component and then reusing it in your project, part of the codemods won't work.
There are three types of codemod pre-requisite checks:

• ones that check the imports and only run when our package imports are used;
• ones that check the component's names (if you alias the components to anything different - it could no longer work);
• ones that do not have any checks (these are the transformations, which we deemed safe as is because the props that they are working with are quite unique and shouldn't trigger false positives in other codebases);

In theory, if you'd change the import path and/or names of the components, before running the codemods, they should apply the respective changes. 🤔