I am migrating from MUI v4 to v5.

So I have countless components that needs to be changed from the makeStyles API to the styled or sx.

As per their migration docs, MUI has a codemod script that may automate a lot of that work.

In order to run this script, I installed as a dev dependency:

npm install -D @mui/codemod

and ran the script as the docs said to:

npx @mui/codemod v5.0.0/jss-to-styled /path/to/my/file/test.tsx

Unfortunately, this is not working, and I am always getting the following error:

TypeError: $ is not a function
    at Object.<anonymous> (/mypath/node_modules/core-js/modules/es.regexp.exec.js:7:1)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Module._compile (/mypath/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Object.newLoader [as .js] (/mypath/node_modules/pirates/lib/index.js:141:7)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (/mypath/node_modules/core-js/internals/fix-regexp-well-known-symbol-logic.js

I even made a test file with just JS to see if it would work, and still nothing.

This is what my test file looks like as an example:

import React from 'react'
import Typography from '@mui/material/Typography'
import makeStyles from '@mui/styles/makeStyles'

const useStyles = makeStyles(() => ({
  typographyRoot: {
    color: 'red',
    backgroundColor: 'blue',
  },
}))

const Test = () => {
  const classes = useStyles()
  return (
    <Typography classes={{ root: classes.typographyRoot }}>
      Bla bla bla
    </Typography>
  )
}

export default Test

Does anyone know if I am doing something wrong and how to get this to work?

Thanks!