Failed to parse JS file

[Duskfall]

Steps to reproduce:
1)Installed package and tried either CLI and VSCode version in windows 10 pro
2)Tried adding typescript and tslint globally.
3)Tested with and without tsconfig file

Expected output:
Convert the react file and produce a tsx file with the appropriate changes

Actual output:

Failed to convert ./summary.js
TypeError: Cannot read property 'kind' of undefined
    at Object.isSourceFile (C:\Users\cyber\AppData\Roaming\npm\node_modules\react-js-to-ts\node_modules\typescript\lib\typescript.js:11833:20)
    at Object.printNode (C:\Users\cyber\AppData\Roaming\npm\node_modules\react-js-to-ts\node_modules\typescript\lib\typescript.js:68607:40)
    at Object.compile (C:\Users\cyber\AppData\Roaming\npm\node_modules\react-js-to-ts\dist\compiler.js:39:27)
    at Object.run (C:\Users\cyber\AppData\Roaming\npm\node_modules\react-js-to-ts\dist\index.js:34:23)
    at Command.<anonymous> (C:\Users\cyber\AppData\Roaming\npm\node_modules\react-js-to-ts\dist\cli.js:46:29)
    at Command.listener (C:\Users\cyber\AppData\Roaming\npm\node_modules\react-js-to-ts\node_modules\commander\index.js:315:8)
    at emitOne (events.js:115:13)
    at Command.emit (events.js:210:7)
    at Command.parseArgs (C:\Users\cyber\AppData\Roaming\npm\node_modules\react-js-to-ts\node_modules\commander\index.js:655:12)
    at Command.parse (C:\Users\cyber\AppData\Roaming\npm\node_modules\react-js-to-ts\node_modules\commander\index.js:475:21)
    at Object.<anonymous> (C:\Users\cyber\AppData\Roaming\npm\node_modules\react-js-to-ts\dist\cli.js:55:9)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)

The file is created as .tsx but no changes to the file are made.

[mohsen1]

Can you paste your Javascript file's contents?

[Duskfall]

import React from 'react';
import { PropTypes } from 'prop-types';
import './_campaign-cart.scss';

const CampaignCart = ({ campaign }) =>
  <div className="campaign-cart">
    <div className="campaign-cart__header">
      Campaign cart
    </div>
    <div className="campaign-cart__description">
      Total campaign cost overview
    </div>
    <br/>

    <table>
      <tbody>
      <tr>
        <td>Campaign type</td>
        <td>{campaign.type}</td>
      </tr>
      <tr>
        <td>Audience size</td>
        <td>{campaign.type}</td>
      </tr>
      <tr>
        <td>Cost per profile</td>
        <td>{campaign.type}</td>
      </tr>
      <tr>
        <td>Sub total</td>
        <td>{campaign.type}</td>
      </tr>
      <tr>
        <td>GST</td>
        <td>{campaign.type}</td>
      </tr>
      <tr>
        <td><b>TOTAL COST</b></td>
        <td>{campaign.type}</td>
      </tr>
      </tbody>
    </table>
    <a href="javascript:void(0);" className="campaign-cart__button">Checkout</a>
  </div>;

CampaignCart.propTypes = {
  campaign: PropTypes.shape({
    type: PropTypes.string.isRequired,
    stars: PropTypes.number.isRequired,
    completed: PropTypes.number.isRequired
  })
};

export default CampaignCart;

[mohsen1]

@Duskfall Is the output here your desired output?

#32

[Duskfall]

Exactly!

[mohsen1]

so core is working fine. Maybe there was an issue in CLI. I'll look into it

[Duskfall]

On Ubunu 16.04 , it works only per file (glob doesn't work)

[GeeWee]

I get the same issue:
Sample jsx file:

import * as React from 'react';
import PropTypes from 'prop-types';
import './Well.css';


class Well extends React.Component {
}

Well.propTypes = {
  foo: PropTypes.string,
};

Well.defaultProps = {
};

export default Well;

(Note this file is with esModuleInterop enabled, hence the React import looking like it does. I have also tested without.

[cdiggins]

@mohsen1 : We are running into this same problem as well. How did you run "core" to get it to work?

EDIT: Works like a charm on Mac, Windows fails even on the example on the home page. Had some trouble on Mac with the globbing though.

[mohsen1]

@cdiggins You can use the CLI

https://github.com/lyft/react-javascript-to-typescript-transform#cli

Also, if you can provide us with a file that didn't work I would appreciate it.

[benoxoft]

I had the same problem as @Duskfall on macOS (glob doesn't work) so I used this command to convert every jsx files we had:

find . -name '*.jsx' -not -path '*/node_modules/*' -exec ./node_modules/.bin/react-js-to-ts {} \;

[mohsen1]

So CLI is broken for sure

#37

[reflog]

same here. both cli and vscode extension are broken

[mediaslav]

problem is here https://github.com/lyft/react-javascript-to-typescript-transform/blob/master/src/compiler.ts#L29

filenames can have various separators and case, so equality don't work here, it needs fileName.replace(/[/\]/g, path.sep).toUpperCase() for both parts atleast on Windows

[AnthonyZavala]

@mediaslav That's the problem I was seeing. Replacing '\' with '/' in the file path fixes the issue.