script Error: did not recognize object of type "PropertyDefinition"

[jennykortina]

I am trying to run an upgrade of material UI from v4 to v5 and am getting an error:

ERR .../index.js Transformation error (did not recognize object of type "PropertyDefinition")
Error: did not recognize object of type "PropertyDefinition"
    at Object.getFieldNames (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/types.js:660:19)
    at visitChildren (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/path-visitor.js:184:36)
    at Visitor.PVp.visitWithoutReset (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/path-visitor.js:166:20)
    at NodePath.each (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/path.js:87:26)
    at visitChildren (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/path-visitor.js:178:18)
    at Visitor.PVp.visitWithoutReset (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/path-visitor.js:166:20)
    at visitChildren (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/path-visitor.js:203:25)
    at Visitor.PVp.visitWithoutReset (/Users/jennykortina/.npm/_npx/60603/lib/node_modules/@mui/codemod/node_modules/ast-types/lib/path-visitor.js:166:20)

index.js looks like:

// @flow
import React, { Component } from 'react';

import withStyles from '@mui/styles/withStyles';
import Typography from '@mui/material/Typography/Typography';

import { sharedStyles } from './sharedStyles';

import type { ClassesObject } from 'helpers/unsafeTypes';

type P = {
  classes: ClassesObject,
};

type S = {
  saving: boolean,
  errorMessage: string,
};

const styles = (theme) => ({
  link: {
    color: 'rgba(0, 0, 0, 0.87)',
    display: 'flex',
    textDecoration: 'none',
    margin: '0 2rem',
  },
  linkImg: {
    height: '20px',
    marginRight: '.5rem',
  },
  linksWrapper: {
    background: 'white',
    boxShadow: '0 0 5px #ccc',
    display: 'flex',
    justifyContent: 'center',
    marginTop: '3rem',
    padding: '2rem',
  },
  pageWrapper: {
    width: '800px',
    textAlign: 'center',
  },
});

class Verify extends Component<P, S> {
  constructor(props: P) {
    super(props);
    this.state = {
      saving: false,
      errorMessage: '',
    };
  }
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.pageWrapper}>
        <Typography style={sharedStyles.title} variant="h5" color="secondary" component="h2">
          Check your email for a link.
        </Typography>
        <Typography className={classes.subTitle} variant="h6" component="h3">
          We’ve sent a verification link to you. This is how we keep your data safe.
        </Typography>
        <div className={classes.linksWrapper}>
          <a target="noopener noreferrer" className={classes.link} href="https://mail.google.com">
            <img
              className={classes.linkImg}
              src='/img/sign-up/gmail.png'
            />
            Open Gmail
          </a>
          <a
            target="noopener noreferrer"
            className={classes.link}
            href="https://outlook.office.com/mail/inbox">
            <img
              className={classes.linkImg}
              src='/img/sign-up/outlook.png'
            />
            Open Outlook
          </a>
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(Verify);

i opened a ticket on the material UI page but they think it's a bug in jscodeshift, which I also think based on this ticket

i am trying to use this codemod npx @mui/codemod v5.0.0/preset-safe ./ --parser=flow

any help would be appreciated thanks!

[AGontcharov]

We're running into the same issue as well on our project using MUI and Flow

[ElonVolo]

Is this problem still an issue or has there been a fix/workaround that's solved it?

[jennykortina]

It is not fixed and a fix would be greatly appreciated!

[vincent-prz]

It is not fixed and a fix would be greatly appreciated!

Same here. Thanks!

[ElonVolo]

I ran the command npx @mui/codemod v5.0.0/preset-safe ./ --parser=flow and I couldn't reproduce the error.

If you're still getting this error, would be possible to set up a Hello Bug (what I call Hello World style micro-project with the bare minimum needed to reproduce the error) and push that up to a newly github repo that will last until the bug is closed?

[ElonVolo]

Wasn't able to duplicate the problem in the project. Closing for now.

[sandorfr]

@ElonVolo probably same cause and same workaround as https://github.com/facebook/jscodeshift/issues/478

[ElonVolo]

If someone who's still experiencing the bug can set up and configure a project on a git repository that reproduces the bug and where all I have to do is do a git clone, npm install, and npm whatever command (npm start, npm foo, etc) to reproduce the bug, then this is something I can look into.