[mui-codemod] mui-replace does not update package.json as documented

[awanlin]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://github.com/backstage/demo

Steps:

1. Run git clone https://github.com/backstage/demo
2. Run yarn install
3. Run npx @mui/codemod@latest v5.0.0/mui-replace .

Notice: the package.json is not changed though the documentation indicates it should be: https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#mui-replace:~:text=mui/lab/Mansory%27%3B-,Dependencies,-//%20package.json%0A%2D

Current behavior 😯

All the code files are updates as expected but the package.json file is not

Expected behavior 🤔

The package.json file should be updated with the proper changes as per the documentation: https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#mui-replace:~:text=mui/lab/Mansory%27%3B-,Dependencies,-//%20package.json%0A%2D

Context 🔦

We are slowly working on migrating Backstage to Material UI v5 from v4 and would like to use as much automation as possible. Ideally we want to be able to tell our adopters to use npx @mui/codemod v5.0.0/preset-safe which includes mui-replace but until this issue is fixed we can't do so.

Your environment 🌎

I've included this as asked but it's not listing the right versions as we are still using packages from @material-ui/*:

https://github.com/backstage/demo/blob/084c8181fe7a1100dff458ef2ae87f290792edbe/packages/app/package.json#L36-L38

Also, I have not included browser details as that doesn't come into play with this issue.

npx @mui/envinfo

  System:
    OS: macOS 14.2.1
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 3.5.0 - ~/.nvm/versions/node/v18.18.2/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
  Browsers:
    Chrome: 120.0.6099.129
    Edge: 120.0.2210.91
    Safari: 17.2.1
  npmPackages:
    @emotion/react:  11.11.1
    @emotion/styled:  11.11.0
    @mui/base:  5.0.0-beta.24
    @mui/core-downloads-tracker:  5.14.18
    @mui/material:  5.14.18
    @mui/private-theming:  5.14.18
    @mui/styled-engine:  5.14.18
    @mui/system:  5.14.18
    @mui/types:  7.2.9
    @mui/utils:  5.14.18
    @types/react:  17.0.71
    react:  18.2.0
    react-dom:  18.2.0
    typescript: ~5.2.0 => 5.2.2

[ZeeshanTamboli]

Thanks for the report. I believe the problem is caused by the fact that it doesn't take into account json files for transformation (see here). I'll work on creating a pull request.

[awanlin]

Thanks for looking into this and submitting a PR to fix it @ZeeshanTamboli. Would you be able to give me a rough timeline as to what the process is like for this to be reviewed, merged, and published, please? I can understand that you can't give me exact dates, just estimates works for me 👍

[ZeeshanTamboli]

@awanlin The merge will happen upon approval, and the publication will occur during our weekly release. I'll make an effort to expedite this PR with the reviewers, but I cannot provide a guarantee.

[awanlin]

Thanks, that works for me, I know these things take time but it looks like it got merged! When do the weekly releases happen? Excited to test this out on my end 🚀

[ZeeshanTamboli]

When do the weekly releases happen?

It will happen at the start of this week. Might be today or tomorrow.

[awanlin]

Finally got time to test this out and I'm hitting an error:

~/repos/forks/backstage/plugins/azure-devops (master)> npx @mui/codemod@latest v5.0.0/preset-safe .
Need to install the following packages:
@mui/codemod@5.15.5
Ok to proceed? (y) y
Executing command: jscodeshift /Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@mui/codemod/node_modules/jscodeshift/bin/jscodeshift.js --transform /Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@mui/codemod/node/v5.0.0/preset-safe.js --extensions js,ts,jsx,tsx,json --parser tsx --ignore-pattern **/node_modules/** /Users/awanlin/repos/forks/backstage/plugins/azure-devops
Processing 86 files...
Spawning 11 workers...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 8 files to free worker...
Sending 6 files to free worker...
 ERR /Users/awanlin/repos/forks/backstage/plugins/azure-devops/package.json Transformation error (Missing semicolon. (2:8))
SyntaxError: Missing semicolon. (2:8)
    at toParseError (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parse-error.ts:81:19)
    at TypeScriptParserMixin.raise (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/tokenizer/index.ts:1487:19)
    at TypeScriptParserMixin.semicolon (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/util.ts:141:10)
    at TypeScriptParserMixin.parseExpressionStatement (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:1313:10)
    at TypeScriptParserMixin.parseExpressionStatement (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/plugins/typescript/index.ts:3044:28)
    at TypeScriptParserMixin.parseStatementContent (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:659:19)
    at TypeScriptParserMixin.parseStatementContent (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/plugins/typescript/index.ts:2887:20)
    at TypeScriptParserMixin.parseStatementLike (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:416:17)
    at TypeScriptParserMixin.parseStatementListItem (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:365:17)
    at TypeScriptParserMixin.parseBlockOrModuleBlockBody (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:1394:16)
    at TypeScriptParserMixin.parseBlockBody (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:1367:10)
    at TypeScriptParserMixin.parseBlock (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:1335:10)
    at TypeScriptParserMixin.parseStatementContent (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:563:21)
    at TypeScriptParserMixin.parseStatementContent (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/plugins/typescript/index.ts:2887:20)
    at TypeScriptParserMixin.parseStatementLike (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:416:17)
    at TypeScriptParserMixin.parseModuleItem (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:353:17)
    at TypeScriptParserMixin.parseBlockOrModuleBlockBody (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:1393:16)
    at TypeScriptParserMixin.parseBlockBody (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:1367:10)
    at TypeScriptParserMixin.parseProgram (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:212:10)
    at TypeScriptParserMixin.parseTopLevel (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/statement.ts:194:25)
    at TypeScriptParserMixin.parse (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/parser/index.ts:45:10)
    at TypeScriptParserMixin.parse (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/plugins/typescript/index.ts:3999:20)
    at Object.parse (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@babel/parser/src/index.ts:66:38)
    at Object.parse (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@mui/codemod/node_modules/jscodeshift/parser/tsx.js:24:22)
    at Object.parse (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/recast/lib/parser.js:23:30)
    at fromSource (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@mui/codemod/node_modules/jscodeshift/src/core.js:82:25)
    at core (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@mui/codemod/node_modules/jscodeshift/src/core.js:44:5)
    at j (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@mui/codemod/node_modules/jscodeshift/src/core.js:142:12)
    at transformer (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@mui/codemod/node/v5.0.0/adapter-v4.js:13:16)
    at transformer (/Users/awanlin/.npm/_npx/2aacf93ee2439f59/node_modules/@mui/codemod/node/v5.0.0/preset-safe.js:63:38)
All done.
Results:
1 errors
71 unmodified
0 skipped
14 ok
Time elapsed: 3.574seconds

Steps to reproduce:

• Clone: https://github.com/backstage/backstage
• Naigate to /plugins/azure-devops
• Run npx @mui/codemod@latest v5.0.0/preset-safe .

Notice you get the error above

[ZeeshanTamboli]

@awanlin I reproduced the issue, and it seems to be related to jscodeshift - either facebook/jscodeshift#559 or facebook/jscodeshift#539. Running the following command works for me:

npx @mui/codemod@latest v5.0.0/preset-safe ./package.json --parser=flow

I'm uncertain about any actions we can take on our side.

[awanlin]

Thanks for taking a look into this @ZeeshanTamboli, I'll try that command as well and report back. I think in our case that should be satisfactory 👍

[awanlin]

Just got around to trying this out and though it works without errors the versions aren't updated so running yarn install fails. This screenshot should explain what I mean:

It simply changes the names but what it should be doing is also updating the package versions. Not sure how that would work, perhaps this feature should juts be removed? 🤔

[ZeeshanTamboli]

The mui-replace codemod only updates package names, not the version. You'll need to handle the version update manually.

[awanlin]

Thanks for confirming, should the docs be updated to clarify that? I feel like others would have made that assumption as well. 🤔