Estoy migrando de MUI v4 a v5.

Así que tengo innumerables componentes que deben cambiarse de la API makeStyles a styled o sx.

Según sus documentos de migración, MUI tiene un script codemod que puede automatizar gran parte de ese trabajo.

Para ejecutar este script, lo instalé como una dependencia de desarrollo:

instalación npm -D @mui/codemod

y ejecutó el script como dijeron los documentos:

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

Desafortunadamente, esto no funciona y siempre recibo el siguiente 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

Incluso hice un archivo de prueba solo con JS para ver si funcionaba, y todavía nada.

Así es como se ve mi archivo de prueba como ejemplo:

 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

¿Alguien sabe si estoy haciendo algo mal y cómo hacer que esto funcione?

¡Gracias!