react-native: React Native 0.56.rc-5 no longer works without Flow

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
      Memory: 822.15 MB / 16.00 GB
      Shell: 5.5.1 - /usr/local/bin/zsh
    Binaries:
      Node: 10.5.0 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 26.0.3, 27.0.3
        API Levels: 19, 23, 26
    IDEs:
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      @types/react: ^16.4.6 => 16.4.6 
      @types/react-native: ^0.55.26 => 0.55.26 
      react: 16.4.1 => 16.4.1 
      react-native: 0.56.0 => 0.56.0 
    npmGlobalPackages:
      babel-preset-react-native-typescript: 1.0.0-rc.1
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Description

Starting with version 0.56.0-rc.5, I can no longer compile my app without the Flow plugin included in my babel config. This is unfortunate since I’m using TypeScript instead of Flow, and the babel plugins for TS and Flow cannot be enabled at the same time.

This works in 0.56.0-rc.4 and thus seems to be a regression.

Reproducible Demo

Using version 0.56.0-rc.5 of React Native, switch out the default babel-preset-react-native for babel-preset-react-native-typescript.
Observe the following error:

error: bundling failed: SyntaxError: node_modules/react-native/Libraries/Lists/VirtualizedList.js: Unexpected token (34:12)

  32 | const {computeWindowedRenderLimits} = require('VirtualizeUtils');
  33 | 
> 34 | import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
     |             ^
  35 | import type {
  36 |   ViewabilityConfig,
  37 |   ViewToken,
    at _class.raise (node_modules/@babel/core/node_modules/babylon/lib/index.js:776:15)
    at _class.unexpected (node_modules/@babel/core/node_modules/babylon/lib/index.js:2079:16)
    at _class.expectContextual (node_modules/@babel/core/node_modules/babylon/lib/index.js:2047:41)
    at _class.parseImport (node_modules/@babel/core/node_modules/babylon/lib/index.js:5205:12)
    at _class.parseImport (node_modules/@babel/core/node_modules/babylon/lib/index.js:9554:48)
    at _class.parseStatementContent (node_modules/@babel/core/node_modules/babylon/lib/index.js:4043:27)
    at _class.parseStatementContent (node_modules/@babel/core/node_modules/babylon/lib/index.js:9605:58)
    at _class.parseStatement (node_modules/@babel/core/node_modules/babylon/lib/index.js:3962:17)
    at _class.parseBlockOrModuleBlockBody (node_modules/@babel/core/node_modules/babylon/lib/index.js:4513:23)
    at _class.parseBlockBody (node_modules/@babel/core/node_modules/babylon/lib/index.js:4500:10)

I haven’t dug in too deep yet, but it seems like maybe the files weren’t transpiled prior to being published to npm?

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (8 by maintainers)

Most upvoted comments

So it seems that publishing Flow files to npm instead of JS is intentional. Flow is a requirement in the built system.

The good news is that #20088 is fixed in Babel beta.48, which should ship with the next metro which should be shipped with React Native 0.57 (the first RC should drop today).

The even better news is that native TypeScript support has been merged to Metro as well 🎉 (facebook/metro#209), so in React Native 0.57, there shouldn’t be any extra steps for running TypeScript.

With that, I’m going to close this bug ☺️

LinusU on Aug 6, 2018

Awesome, thank you!

Regarding making TypeScript work out of the box, I actually think that it should be quite easy to add that in a very non-obtrusive way. If we can:

fix #20088
only load transform-flow-strip-types when filename doesn’t end in .ts(x)
load transform-typescript when filename does end in .ts(x) (this is the default behavior of preset-typescript in recent babel (beta 48 and up I think, RN uses beta 47 at the moment))
add .ts and .tsx to the default list of extensions

Then TypeScript support would just work by renaming files to .ts(x) instead of .js(x), I think that would be amazing 😍

note that it would not require installing TypeScript for people not using it since it would use Babel instead of tsc to transform the TypeScript source into JavaScript code.

LinusU on Jul 10, 2018

Neat! Sounds good – I’m playing catch-up at work but will take a deeper dive into the RFC PR and this issue on the weekend.

ashfurrow on Jul 11, 2018

Understood - anyway, can you please ping me via Twitter DMs so we can try to coordinate around this without polluting the issue too much?

kelset on Jul 26, 2018

@kelset I can ensure you that my app was working before I upgrade to "react-native": "0.56.0", there is some issue with the Babel config.

Worth to mention, I am using create-react-native-app.

yordis on Jul 4, 2018