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

Open
gvidaver opened this issue Mar 26, 2024 · 8 comments
Open

[data grid] 7.0 migration script exception #12567

gvidaver opened this issue Mar 26, 2024 · 8 comments
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

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/x-codemod@7.0.0-beta.7
Ok to proceed? (y) y
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: 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/plugin-proposal-nullish-coalescing-operator@7.18.6: 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 urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: 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 resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: 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

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

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

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
@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!

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
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@Janpot @roastnewt @gvidaver @Nick-Lucas @MBilalShafi @michelengelen @zannager