react-codemod/transforms/class.js has a issues

[kentcdodds]

I'm just here to say thanks for this! I'm really amazed at how well it works and I was pleasantly surprised that it doesn't just force an import of create-react-class but it will actually codemod to ES6 class (with public class fields) if it's not using mixins 🎉 thanks!

Results: 
0 errors
495 unmodified
0 skipped
196 ok

[kentcdodds]

Actually... 😅 I think I found a few problems:

1. The import is set to: import createReactClass from 'react-create-class' but I believe the package was changed to 'create-react-class' instead, so that should probably be updated.
2. It also entirely removes my React import in some cases, which gives me trouble when transpiling JSX :)

Sorry :-/

[acdlite]

Oops, forgot to update the default for the create-class-module-name option: https://github.com/reactjs/react-codemod/blob/master/transforms/class.js#L66

Regarding number 2, can you copy-paste a test case where the import gets removed erroneously? Surprised we didn't encounter that one internally.

[acdlite]

Fixed issue 1.

Steps to reproduce 2 would be appreciated, please :)

[erosenberg]

@acdlite - I'm encountering problem 2. I am getting a whole bunch of SyntaxErrors pre-JSX transpiling it seems. Are there any good work-arounds?

[kentcdodds]

Sorry I never got around to reproducing it. @erosenberg, I'm sure that @acdlite could still use some help reproducing the problem ;)

[erosenberg]

I actually believe my error was resolved once I took react-codemod out of my project folder and into a general folder. I was also running into some issues with ESLint when I ran yarn within react-codemod at first, but that also went away when I isolated the folder. Originally I had tried to simply npm install react-codemod and didn't do it separately from my project. I'm not sure if that helps at all, but it messed me up for a bit. That's probably as much as I can remember, but if I happen to think of anything else that I did to reproduce it I'll update this comment!

[benmosher]

FWIW, I saw KCD#2 (removed React import) in several cases where I had

import React, { Component } from 'react'

export default React.createClass({
  mixins: [...],
  render() { return <div /> }
})

but Component was unused, before and after the transform (all components defined in the file had custom mixins).

Transformed to

import {Component} from 'react'
import createReactClass from 'create-react-class'

export default createReactClass({
  mixins: [...],
  render() { return <div /> }
})

resulting in JSX issues.

Files with only import React from 'react' that transformed to either ES6 or createReactClass were fine.