Error when running pure-component on tsx file

When running the pure-component codemod on a typescript file

// TransformTest.tsx
import React from 'react';

class TransformTest extends React.Component {
	render() {
		return <div>I've too much class</div>;
	}
}

export default TransformTest;

I see the following errors

react-codemod pure-component TransformTest.tsx
? Which dialect of JavaScript do you use? TypeScript
? Use arrow functions? No
? Destructure props? No
Executing command: jscodeshift --verbose=2 --ignore-pattern=**/node_modules/** --parser tsx --extensions=tsx,ts,jsx,js --transform /Users/nick/.config/yarn/global/node_modules/react-codemod/transforms/pure-component.js TransformTest.tsx
Processing 1 files... 
Spawning 1 workers...
Sending 1 files to free worker...
 ERR TransformTest.tsx Transformation error (Cannot read property 'value' of undefined)
TypeError: Cannot read property 'value' of undefined
    at NodePath.pureClasses.replaceWith.p (/Users/nick/.config/yarn/global/node_modules/react-codemod/transforms/pure-component.js:296:37)
    at NodePath.<anonymous> (/Users/nick/.config/yarn/global/node_modules/react-codemod/node_modules/jscodeshift/src/collections/Node.js:144:47)
    at __paths.forEach (/Users/nick/.config/yarn/global/node_modules/react-codemod/node_modules/jscodeshift/src/Collection.js:77:36)
    at Array.forEach (<anonymous>)
    at Collection.forEach (/Users/nick/.config/yarn/global/node_modules/react-codemod/node_modules/jscodeshift/src/Collection.js:76:18)
    at Collection.replaceWith (/Users/nick/.config/yarn/global/node_modules/react-codemod/node_modules/jscodeshift/src/collections/Node.js:142:17)
    at Collection.replaceWith (/Users/nick/.config/yarn/global/node_modules/react-codemod/node_modules/jscodeshift/src/Collection.js:415:43)
    at module.exports (/Users/nick/.config/yarn/global/node_modules/react-codemod/transforms/pure-component.js:291:15)
All done. 
Results: 
1 errors
0 unmodified
0 skipped
0 ok

Node v10.18.0

I am dealing with this error too. Would love to know more.

This seems to be the block of code it is referring to:

  pureClasses.replaceWith(p => {
    const name = p.node.id.name;
    const renderMethod = p.value.body.body.filter(isRenderMethod)[0];
    const renderBody = renderMethod.value.body;
    const propsTypeAnnotation = findPropsTypeAnnotation(p.value.body.body);
    const statics = p.value.body.body.filter(isStaticProperty);
    const destructure = destructuringEnabled && canDestructure(j(renderMethod));

I think the offending couple of lines are:

    const renderMethod = p.value.body.body.filter(isRenderMethod)[0];
    const renderBody = renderMethod.value.body;

Is it possible that for some reason it can't find the render method?

Not sure why this was closed; I still see the same issue. I looked into this for a bit and found that isRenderMethod needs to check for the ClassMethod type in addition to MethodDefinition. But that's not enough: it expects a .value attribute on the method, but ClassMethod doesn't have those. After I fix that too, I get an Error: Could not replace path.

Navigation Menu

Repository navigation

Error when running pure-component on tsx file #257

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Error when running pure-component on tsx file #257

Description

Activity

LukasDeco commented on Mar 20, 2020

LukasDeco commented on Mar 24, 2020

JelleZijlstra commented on Sep 1, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions