*.tsx parser fails

[yurii-sorokin]

Hi. I've tried to use depcheck with tsx files + typescript@2, but with no luck. I reciving parsing error like:

"SyntaxError: Unexpectedtoken(5: 16)
atParser.pp$5.raise(.../depcheck/node_modules/babylon/lib/index.js: 4333: 13)
atParser.pp.unexpected(.../depcheck/node_modules/babylon/lib/index.js: 1705: 8)
atParser.pp$3.parseParenAndDistinguishExpression(.../depcheck/node_modules/babylon/lib/index.js: 3776: 10)
atParser.pp$3.parseExprAtom(.../depcheck/node_modules/babylon/lib/index.js: 3629: 19)
atParser.pp$3.parseExprSubscripts(.../depcheck/node_modules/babylon/lib/index.js: 3414: 19)
atParser.pp$3.parseMaybeUnary(.../depcheck/node_modules/babylon/lib/index.js: 3394: 19)
atParser.pp$3.parseExprOps(.../depcheck/node_modules/babylon/lib/index.js: 3324: 19)
atParser.pp$3.parseMaybeConditional(.../depcheck/node_modules/babylon/lib/index.js: 3301: 19)
atParser.pp$3.parseMaybeAssign(.../depcheck/node_modules/babylon/lib/index.js: 3264: 19)
atParser.pp$3.parseExpression(.../depcheck/node_modules/babylon/lib/index.js: 3226: 19)"

To reproduce go to test/fake_modules/typescript and change component.tsx from

import * as React from 'react';

export default class MyComponent extends React.Component<{}, {}> {
}

to

import * as React from 'react';

export default class MyComponent extends React.Component<{}, {}> {
  render() {
    return (<div>fake</div>)
  }
}

and run tests.

You will see that there are 2 failing tests. Both about typescript parser.

[rajington]

that PR worked for me, might want to submit a PR

[lijunle]

I am sorry that, I don't notice this issue. Why TypeScript compiler not happy with your code? How does it happen?

[yurii-sorokin]

As I can see the problem is that depcheck uses some default config for compiler options. After PR which added jsx option it might work in most cases. But I believe that instead of providing some defaults depcheck should try to read tsconfig from package first and use it.

As I still can repro the issue and depcheck tests are passing I've created the repo.
https://github.com/yurii-sorokin/depcheck-ts-bug

Setup repo:

npm run bootstrap

This command will install all dependencies.

Check that ts code is ok:

npm run build

This command will transpile ts using tsc.

Check that depcheck is fail:

npm run test

And finally, this one will run depcheck again to packages (both should have errors).

The result should be like (cutted):

npm run test                                                                                                                                                             Projects/depcheck-ts-bug master

> depcheck-ts-bug@1.0.0 test ../depcheck-ts-bug
> node scripts/check.js

[CHECK] ../depcheck-ts-bug/packages/pkg-test-one/
[RESULT]
{ dependencies: [ 'react', 'react-materialize', [length]: 2 ],
  devDependencies: [ [length]: 0 ],
  missing: {},
  using: {},
  invalidFiles:
   { '../depcheck-ts-bug/packages/pkg-test-one/src/test-one.tsx':
      { SyntaxError: Unexpected token (7:8)
    at Parser.pp$5.raise (../depcheck-ts-bug/node_modules/babylon/lib/index.js:4454:13)
    ...   
    at Parser.pp$1.parseStatement (../depcheck-ts-bug/node_modules/babylon/lib/index.js:1906:19)',
        [message]: 'Unexpected token (7:8)',
        pos: 234,
        loc: Position { line: 7, column: 8 } } },
  invalidDirs: {} }
[/RESULT]
[/CHECK]

[CHECK] ../depcheck-ts-bug/packages/pkg-test-two/
[RESULT]
{ dependencies: [ 'react', 'react-materialize', [length]: 2 ],
  devDependencies: [ [length]: 0 ],
  missing: {},
  using: {},
  invalidFiles:
   { '../depcheck-ts-bug/packages/pkg-test-two/src/sub-test.two.tsx':
      { SyntaxError: Unexpected token (6:8)
    at Parser.pp$5.raise (../depcheck-ts-bug/node_modules/babylon/lib/index.js:4454:13)
    ...
    at Parser.pp$1.parseStatement (../depcheck-ts-bug/node_modules/babylon/lib/index.js:1906:19)',
        [message]: 'Unexpected token (6:8)',
        pos: 179,
        loc: Position { line: 6, column: 8 } },
     '../depcheck-ts-bug/packages/pkg-test-two/src/test-two.tsx':
      { SyntaxError: Unexpected token (7:8)
    at Parser.pp$5.raise (../depcheck-ts-bug/node_modules/babylon/lib/index.js:4454:13)
    ...
    at Parser.pp$1.parseStatement (../depcheck-ts-bug/node_modules/babylon/lib/index.js:1906:19)',
        [message]: 'Unexpected token (7:8)',
        pos: 226,
        loc: Position { line: 7, column: 8 } } },
  invalidDirs: {} }
[/RESULT]
[/CHECK]

[lijunle]

As I can see the problem is that depcheck uses some default config for compiler options. After PR which added jsx option it might work in most cases. But I believe that instead of providing some defaults depcheck should try to read tsconfig from package first and use it.

I see. I suppose that is controlled here:

depcheck/src/parser/typescript.js

Lines 11 to 14 in 153aa50

	const compileOptions = {
	module: typescript.ModuleKind.CommonJS,
	target: typescript.ScriptTarget.Latest,
	};

We need to change this hard coded compile option to read it from file. Not sure if TypeScript provides util to help here.

@yurii-sorokin Could you please help on this issue?

[yurii-sorokin]

I could, I just can't give any estimations.

[ubnt-marc-khouri]

@lijunle in my testing, the linked PR (#230) resolves this issue -- is there any chance you would be able to merge it? Thanks!

[lijunle]

Hey, @ubnt-marc-khouri I am sorry that, I really don't have time to continue working on this project. If you are interested in fixing these issue, please tell me and I will loop you as contributors.

[ubnt-marc-khouri]

hi @lijunle, I have some spare time these days and I'd be happy to contribute! Instead of this work account, could you please add my personal account @mnkhouri

[mnkhouri]

Fixed by #230

[mnkhouri]

Thanks @yurii-sorokin !