[docs] Problems with running codemod

I spent about 3 hours trying to upgrade my project from v4 to v5 and then I gave up.

There are all the issues I encountered:

First thing I tried was literally what was written in the README:

npm install -D @material-ui/codemod
npx jscodeshift -t box-sx-prop -d src/

It didn’t work. Jscodeshift returned some cryptic error.

It took me a while to realize that the codemod path should be the actual path to the file in the package in node_modules. I also realized that the codemod is not there, so I tried installing again with @next tag and I finally made some progress:

npm install -D @material-ui/codemod@next
npx jscodeshift -d -t node_modules/@material-ui/codemod/lib/node/v5.0.0/box-sx-prop.js src/

It ran without errors, but it detected 0 files.

After some more digging in docs I figured out I have to specify extensions like that:

npx jscodeshift -d --extensions js,ts,jsx,tsx -t node_modules/@material-ui/codemod/lib/node/v5.0.0/box-sx-prop.js src/

Then it would error again with unexpected token errors.

After some searching on stackoverflow I found out you have to have a babel config in your project. I didn’t have one, because I was using snowpack. I also tried installing parcel instead of snowpack because I know that it uses babel for compiling, but it didn’t help.

I copy-pasted some config which I found on stackoverflow that supposedly should make it work:

// babel.config.js
module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["@babel/preset-react", "@babel/preset-typescript"],
  }
}

That gave me errors about that the plugins aren’t installed, even though both snowpack and parcel are installed and they work.

Okay, I installed the plugins manually as dev dependencies…

It still didn’t work. I got the same unexpected token errors as before.

I give up. Funny thing is that if I changed all the Box props to sx manually then I would be already finished. It’s not easy though, because they only produce a warning at runtime. TypeScript considers them not an error.

The app does work with alpha version. It only shows warnings in the console about the sx prop.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

As above.

Expected Behavior 🤔

A perfect solution would be a command like npx jscodeshift @material-ui/codemod/box-sx-prop src/ which supports TypeScript out of the box.

Another solution would be to write better documentation. Ideally a list of commands which do all the necessary stuff and then uninstall all the unnecessary things.

Steps to Reproduce 🕹

As above.

Context 🔦

I was trying to upgrade my MUI app which uses v4 to v5.

Your Environment 🌎

Tech	Version
Material-UI	5.0.0-alpha.16
React	17.0.1
TypeScript	4.0.5
Babel	7.12.x

[StuffByLiang]

@eps1lon Would love to make a pr adding some documentation to use codemod with typescript! I’m migrating to mui v4 -> v5 and I also had a bit of a struggle getting mui’s codemod to run with typescript. Thoughts?

Also for me, I used

npm install -D @material-ui/codemod@next
npx jscodeshift -t ./node_modules/@material-ui/codemod/node/v5.0.0/textfield-variant-prop.js ./src --extensions tsx --parser tsx

would preferably add it here https://github.com/mui-org/material-ui/tree/HEAD/packages/material-ui-codemod#box-sx-prop

[lionpunk]

@StuffByLiang Your solution works fine