Transformation error (Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.

While doing the codemod via jscodeshift API, I get the error as below.

Transformation error (Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead.

My React Code

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import _ from 'lodash';
import {Button} from 'common/components';
import Link from 'common/components/ui/Link';
import showDialog from 'app/lib/showDialog';
import PersonaEditDialogContainer from 'app/components/personas/PersonaEditDialogContainer';

function mapStateToProps(state, ownProps) {
  return {
    personas: _.values(state.entities.personas).filter(
      (p) => ownProps.personaIds.indexOf(p.id) != -1,
    ),
  };
}
@connect(
  mapStateToProps,
  {},
)
export default class PersonaLinks extends Component {
  static propTypes = {
    personaIds: PropTypes.array.isRequired,
    handlePersonaUpdate: PropTypes.func,
  };

  handlePersonaClick = (persona) => {
    showDialog(this.context, PersonaEditDialogContainer, {
      mode: 'edit',
      persona,
      updatePersonaCallback: this.props.handlePersonaUpdate,
    });
  };

  render() {
    const { personas } = this.props;
    if (personas.length == 0) {
      return null;
    } else {
      return (
        <span>
          {personas.map((p, i) => (
            <span>
              <Button iconName="minus"/>
              <Link onClick={this.handlePersonaClick.bind(this, p)}>{p.name}</Link>
              {i < personas.length - 2 && ', '}
              {i == personas.length - 2 && ' and '}
            </span>
          ))}
        </span>
      );
    }
  }
}

My TransformFile

/* eslint-disable no-param-reassign */
const addImports = require('jscodeshift-add-imports');

module.exports.parser = 'babel';

module.exports = function transformer(file, api) {
  const j = api.jscodeshift;
  const { statement } = j.template;

  const rootSource = j(file.source);

  /**
   * Remove import statements if Button is the only specifier in the import statements
   */
  rootSource.find(j.ImportDeclaration).forEach((path) => {
    if (path.value.specifiers.length === 1 && path.value.specifiers[0].local.name === 'Button') {
      j(path).remove();
    }
  });

  /**
   * Remove old button references from import statements
   */
  rootSource.find(j.ImportDeclaration).forEach((path) => {
    const updatedSpecifiers = [];
    const specifiers = path.value.specifiers;
    specifiers.forEach((specifier) => {
      if (specifier.local.name !== 'Button') {
        updatedSpecifiers.push(specifier);
      }
      path.value.specifiers = updatedSpecifiers;
    });
  });

  /**
   * Adds the NewButton import statement.
   * * Uses `jscodeshift-add-imports` library for the same.
   */
  addImports(rootSource, [
    statement`import NewButton from 'common/components/design-system/Button';`,
  ]);

  // Modifiy the component name in the usage
  rootSource.find(j.JSXIdentifier, { name: 'Button' }).forEach((path) => {
    path.value.name = 'NewButton';
  });

  //Modify the props for the Button component
  rootSource.find(j.JSXIdentifier, { name: 'NewButton' }).forEach((path) => {
    const attributes = path.parentPath.value.attributes;
    attributes &&
      attributes.forEach((apath) => {
        if (apath.name && apath.name.name === 'iconName') {
          apath.name.name = 'icon';
        }
      });
  });

  return rootSource.toSource();
};

[Daniel15]

Maybe we should change it in a major version bump just in case it breaks anything. We can bundle other potentially-risky changes in the same version.

[klippx]

I do not personally like decorators, but here I am in a codebase where I am trying to write a codemod to migrate out of typegraphql to remove all decorator annotations. But I hit a snag that the parser does not comprehend it. How do I get it to parse a file such as this one?

import { Directive, Field, ObjectType } from 'type-graphql';
import { SchemaBase } from './schemaBase';
import { Visualization } from './visualization';

@ObjectType({
  description: 'Description goes here',
})
@Directive('@cacheControl(maxAge: 200)')
export class VisualizationList {
  @Field(() => [Visualization], {
    nullable: true,
  })
  visualizations?: Visualization[];
}

EDIT: Got it working with this config.

const options = {
  dry: true,
  print: true,
  verbose: 1,
  parser: 'babylon',
  parserConfig: {
    sourceType: 'module',
    allowImportExportEverywhere: true,
    allowReturnOutsideFunction: true,
    startLine: 1,
    tokens: true,
    plugins: [
      'typescript',
      ['decorators', { decoratorsBeforeExport: true }],
    ],
  },
};