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.

Sign up for GitHub

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

Jump to bottom

[data grid] 7.0 migration script exception #12567

Closed
gvidaver opened this issue Mar 26, 2024 · 10 comments · Fixed by #12305
Closed

[data grid] 7.0 migration script exception #12567

gvidaver opened this issue Mar 26, 2024 · 10 comments · Fixed by #12305
Labels
component: data grid This is the name of the generic UI component, not the React module! package: codemod Specific to @mui/codemod support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/ v7.x migration

Comments

@gvidaver
Copy link

gvidaver commented Mar 26, 2024 •
edited by github-actions bot
Loading

Steps to reproduce

Link to live example: (required)

Gosh I wish I could give you a runnable example, but here's the log instead.
Steps:

  1. npx @mui/x-codemod@next v7.0.0/data-grid/preset-safe .
  2. see exception:
%  npx @mui/x-codemod@next v7.0.0/data-grid/preset-safe .

Need to install the following packages:
@mui/[email protected]
Ok to proceed? (y) y
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
Executing command: jscodeshift /Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/@mui/x-codemod/node_modules/jscodeshift/bin/jscodeshift.js --transform /Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/@mui/x-codemod/v7.0.0/data-grid/preset-safe --extensions js,ts,jsx,tsx --parser tsx --ignore-pattern **/node_modules/** /Users/go22670/Projects/kwicked2

====================================
IMPORTANT NOTICE ABOUT CODEMOD USAGE
====================================
Not all use cases are covered by codemods. In some scenarios, like props spreading, cross-file dependencies and etc., the changes are not properly identified and therefore must be handled manually.

For example, if a codemod tries to rename a prop, but this prop is hidden with the spread operator, it won't be transformed as expected.
<DatePicker {...pickerProps} />
  
After running the codemods, make sure to test your application and that you don't have any console errors.

Processing 75 files... 
Spawning 9 workers...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 3 files to free worker...
 ERR /Users/go22670/Projects/kwicked2/src/components/transcript/Transcript.tsx Transformation error (did not recognize object of type "TSInstantiationExpression")
Error: did not recognize object of type "TSInstantiationExpression"
    at Object.getFieldNames (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/types.js:660:19)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:184:36)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at NodePath.each (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path.js:87:26)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:178:18)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at NodePath.each (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path.js:87:26)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:178:18)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at NodePath.each (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path.js:87:26)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:178:18)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at NodePath.each (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path.js:87:26)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:178:18)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:166:20)
    at Visitor.PVp.visit (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:104:29)
    at Object.visit (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/ast-types/lib/path-visitor.js:80:55)
    at Collection.<anonymous> (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/@mui/x-codemod/node_modules/jscodeshift/src/collections/Node.js:53:14)
    at Array.forEach (<anonymous>)
    at Collection.find (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/@mui/x-codemod/node_modules/jscodeshift/src/collections/Node.js:44:18)
    at Collection.find (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/@mui/x-codemod/node_modules/jscodeshift/src/Collection.js:413:43)
    at checkPreRequisitesSatisfied (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/@mui/x-codemod/util/renameIdentifiers.js:36:26)
    at transformer (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/@mui/x-codemod/v6.0.0/data-grid/rename-components-to-slots/index.js:40:72)
    at transformer (/Users/go22670/.npm/_npx/61f2f8787e4fed1c/node_modules/@mui/x-codemod/v7.0.0/data-grid/preset-safe/index.js:11:53)




All done. 
Results: 
1 errors
72 unmodified
0 skipped
2 ok
Time elapsed: 39.960seconds

Current behavior

Throws an exception while running migration script. Seems to complete otherwise though.

Expected behavior

No exception.

Context

Running 7.0 migration script.

Your environment

npx @mui/envinfo 
  System:
    OS: macOS 14.4
  Binaries:
    Node: 21.7.1 - /usr/local/bin/node
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 123.0.6312.59
    Edge: Not Found
    Safari: 17.4
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.35 
    @mui/core-downloads-tracker:  5.15.8 
    @mui/icons-material: ^5.15.7 => 5.15.7 
    @mui/joy: ^5.0.0-beta.26 => 5.0.0-beta.26 
    @mui/material: ^5.14.7 => 5.14.7 
    @mui/private-theming:  5.15.8 
    @mui/styled-engine:  5.15.8 
    @mui/system:  5.15.8 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.8 
    @mui/x-data-grid: next => 6.19.2 
    @mui/x-data-grid-generator: next => 6.19.2 
    @mui/x-data-grid-premium:  6.19.2 
    @mui/x-data-grid-pro:  6.19.2 
    @mui/x-date-pickers:  6.19.2 
    @mui/x-date-pickers-pro: next => 6.19.2 
    @mui/x-license-pro:  6.10.2 
    @types/react: ^18.2.48 => 18.2.48 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.3.3 => 5.3.3

Search keywords: TSInstantiationExpression
Order ID: c74f7af5c579dc47e7ed444056faa516Tz03NzAwMCxFPTE3MjkzNjI5NDQwMDAsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI=
@gvidaver gvidaver added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 26, 2024
@zannager zannager added component: data grid This is the name of the generic UI component, not the React module! support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/ labels Mar 27, 2024
@michelengelen
Copy link
Member

Hey @gvidaver could you tell us what the content of /Users/go22670/Projects/kwicked2/src/components/transcript/Transcript.tsx is?

@michelengelen michelengelen added status: waiting for author Issue with insufficient information v7.x migration and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 27, 2024
@michelengelen michelengelen changed the title data-grid 7.0 migration script exception [data grid] 7.0 migration script exception Mar 27, 2024
@Janpot
Copy link
Member

Janpot commented Mar 27, 2024 •
edited
Loading

Looks like the codemod struggles with modern typescript constructs, like satisfies or instantiation expressions. Seeing it on the v7 migration in Toolpad as well

@MBilalShafi
Copy link
Member

MBilalShafi commented Mar 27, 2024 •
edited
Loading

The reason migration on some of the recently introduced typescript constructs fails is the usage of the previous version of the jscodeshift which doesn't support them, the bump to the latest version is blocked due to an issue with the underlying library.

We will try to have a workaround by pinning the dependencies to a previous version using yarn resolutions as suggested in facebook/jscodeshift#534 (comment)

@MBilalShafi MBilalShafi added the package: codemod Specific to @mui/codemod label Mar 27, 2024
@roastnewt
Copy link

+1

@Janpot
Copy link
Member

Janpot commented Mar 28, 2024

the bump to the latest version is blocked due to an issue with the underlying library.

I see. Personally, that issue feels less of a problem to me than the typescript one. It can be easily solved on my end by running my formatter after the MUI codemod.

It's also not the only parentheses formatting problem with codemod. I ran into the following as well on the Toolpad codebase:

const x = () => ({ foo: 'bar' }) as Foo;

gets turned into

const x = () => ({ foo: 'bar' } as Foo);

@github-actions GitHub Actions
Copy link

github-actions bot commented Apr 4, 2024

The issue has been inactive for 7 days and has been automatically closed.

@github-actions github-actions bot closed this as completed Apr 4, 2024
@Janpot
Copy link
Member

Janpot commented Apr 4, 2024 •
edited
Loading

Reproductions for both cases:

import { GridColDef } from "@mui/x-data-grid";

// Transformation error (did not recognize object of type "TSSatisfiesExpression")
const cols = [] satisfies GridColDef[];
function makeBox<T>(value: T) {
  return { value };
}

// Transformation error (did not recognize object of type "TSInstantiationExpression")
const makeStringBox = makeBox<string>; 
const stringBox = makeStringBox("abc");

@Janpot Janpot reopened this Apr 4, 2024
@Janpot Janpot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Apr 4, 2024
@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 4, 2024
@github-project-automation github-project-automation bot moved this to 🆕 Needs refinement in MUI X Data Grid Apr 4, 2024
@Nick-Lucas
Copy link

I see. Personally, that issue feels less of a problem to me than the typescript one. It can be easily solved on my end by running my formatter after the MUI codemod.

Agreed, perhaps the team could publish a canary with the upgrade on, that way those of us who use formatters can try the codemod and at least feed back on any other issues which come out the woodwork? Best case it works great alongside prettier and we can get upgraded!

@Nick-Lucas
Copy link

Morning @MBilalShafi @Janpot was there any progress on this?

My team (Premium licences) is keen to upgrade, and can easily run prettier formatting afterwards, but the codemod crashing is a blocker as we have too many datagrids to migrate manually

@MBilalShafi MBilalShafi mentioned this issue Jun 12, 2024
Merged
1 task
@github-actions GitHub Actions
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.

@gvidaver: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

@cherniavskii cherniavskii moved this from 🆕 Needs refinement to ✅ Done in MUI X Data Grid Jul 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: data grid This is the name of the generic UI component, not the React module! package: codemod Specific to @mui/codemod support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/ v7.x migration
Projects
MUI X Data Grid
Status: ✅ Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Bump jscodeshift to 0.15.2 mui/mui-x
7 participants
@Janpot @roastnewt @gvidaver @Nick-Lucas @MBilalShafi @michelengelen @zannager