Broken in react-native@0.57.0-rc.3

[nico1510]

I'm aware that I'm a bit early here but I just wanted to let you know or ask if the transformer might be broken in the newest version of react-native ?

SyntaxError: /testproject/src/components/Test.tsx: Unexpected token, expected ")" (37:30)

  35 | 
  36 | interface SectionProps {
> 37 |     content: (({ i, isActive }: { i: number, isActive: boolean }) => React.ReactElement<any>) | string;
     |                               ^
  38 |     label: string;
  39 |     info: string | number;
  40 |     direction?: 'row' | 'column';

SyntaxError: /testproject/src/components/Test.tsx: Unexpected token, expected ")" (37:30)

  35 | 
  36 | interface SectionProps {
> 37 |     content: (({ i, isActive }: { i: number, isActive: boolean }) => React.ReactElement<any>) | string;
     |                               ^
  38 |     label: string;
  39 |     info: string | number;
  40 |     direction?: 'row' | 'column';
    at _class.raise (/testproject/node_modules/@babel/parser/lib/index.js:3906:15)
    at _class.unexpected (/testproject/node_modules/@babel/parser/lib/index.js:5235:16)
    at _class.expect (/testproject/node_modules/@babel/parser/lib/index.js:5223:28)
    at _class.tsParseParenthesizedType (/testproject/node_modules/@babel/parser/lib/index.js:8943:12)
    at _class.tsParseNonArrayType (/testproject/node_modules/@babel/parser/lib/index.js:9043:23)
    at _class.tsParseArrayTypeOrHigher (/testproject/node_modules/@babel/parser/lib/index.js:9050:23)
    at _class.tsParseTypeOperatorOrHigher (/testproject/node_modules/@babel/parser/lib/index.js:9094:122)
    at _class.tsParseUnionOrIntersectionType (/testproject/node_modules/@babel/parser/lib/index.js:9099:18)
    at _class.tsParseIntersectionTypeOrHigher (/testproject/node_modules/@babel/parser/lib/index.js:9117:19)
    at _class.tsParseUnionOrIntersectionType (/testproject/node_modules/@babel/parser/lib/index.js:9099:18)

I'm getting this error which lets me think that babel is trying to transform the code before the typescript transformer jumps in.

[kristerkari]

I'm also interested in knowing about the compatibility of the soon to be released 0.57 version.

At least the v0.57 has changes to the Metro bundler config. I'm not really sure what changes are needed though.

[dalcib]

Since the version 0.43.3, Metro has native support for Typescript by Babel 7.0.0 Plugin. See Add TypeScript support to React Native and #209 The react-native 0.57-rc3 comes with Metro 0.43.6 I don't know how it can afect this package.

[nico1510]

You're correct typescript is now supported out of the box in react-native. I had to change my code to

interface SectionProps {
    content: ((props: { i: number, isActive: boolean }) => React.ReactElement<any>) | string;
    label: string;
    info: string | number;
    direction?: 'row' | 'column';
}

to make the babel typescript compiler accept it. I'm going to leave this issue open since metro is not even trying to make use of this transformer anymore but feel free to close it if you think it's not worth looking into now that typescript is supported by babel.

[acuntex]

Could you add some notice to the README that it's not needed anymore in 0.57? (Which is awesome for react-native, but sad for this transformer :-( )

[kristerkari]

Yup, Typescript is supported by default in 0.57. No transformers needed.

[xufeipyxis]

@kristerkari thanks.

I went through a long way and finally found that it is actually as simple as this:

1. npm i -g react-native-cli
2. react-native init project057 (make sure the react-native version is 0.57)
3. react-native run-ios (make sure you can debug it as well)
4. rename the app.js to app.tsx

• to .tsx not .ts,
• you can't rename the index.js

5. Nothing is needed to install, just run-ios and debug it

[sunnylqm]

@xufeipyxis React Native should be able to pick up .ts and .tsx files automatically, and transpile them using Babel.(But keep the root entry file as 'index.js')

[kristerkari]

@xufeipyxis I updated one of my project that was using this library to React Native 0.57. I removed transformer and the project continued working normally. So I guess that you only need to install Typescript.

Here are my changes when updating to 0.57: https://github.com/kristerkari/react-native-css-modules-with-typescript-example/commit/d4ec640b374200011f9a3f5f3f462f2b0b58ac53#diff-c2e7e130f67fd2d0a2fe543cc954a128

[vovkasm]

For people that still want to use this module, solution is simple. In file rn-cli.config.js remove keys getTransformModulePath and getSourceExts, and add section:

  transformer: {
    babelTransformerPath: require.resolve('react-native-typescript-transformer'),
  },

For documentation, see https://facebook.github.io/metro/docs/en/configuration

[nico1510]

thanks @vovkasm I think this can be closed

[JonET]

Man, I'm new to react-native. I just started trying to figure out why react native was being so strange wrt to typescript and this finally explains everything. The existing guides out there are all wrong right now.

[aMarCruz]

@vovkasm thanks! I prefer the support for const enum than the marginal gain in speed.