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

[LinusU]

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

1. Using version 0.56.0-rc.5 of React Native, switch out the default babel-preset-react-native for babel-preset-react-native-typescript.
2. 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?

[kelset]

Uhm... I'm confused, are you sure that that module works properly?
It seems like you it's 2 hrs old so I don't understand how we could have tested against it :/

Which commit in rc5 do you think could have created the regression compared to rc4?

[yordis]

@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.

[LinusU]

@yordis I think that you want #20015, this issue is when specifically and intentionally removing the transform-flow-strip-types plugin.

@kelset I was actually installing rc.4 instead of rc.5, thinking it was the latest. While still at the rc.4 I configured babel to use TypeScript instead of Flow, and then published that config as babel-preset-react-native-typescript. After that, I discovered that rc.5 was the latest version, so I bumped the version and then started seeing the error.

Upon investigating more, I think that it actually only worked in rc.4 since I was using a small subset of the react native library which happened to not contain any import type statements. With the ongoing transition from PropTypes to Flow, I think that import type became more widespread in the codebase, and thus I hit the error.

It seems like React Native isn't transpiled before publishing to Npm, and thus it's not JavaScript that gets published, it's Flow. Is this intentional?

My goal is to be able to use the Babel 7 to transpile my TypeScript source so that I can write my React Native app in TypeScript. But since Flow and TypeScript cannot be active at the same time in Babel, I cannot have the Flow plugin activated. Currently, I cannot consume the React Native library when not using the Flow plugin since the published files have import type statements (and similar) in them.

[LinusU]

I'm also having the same problem in the final 0.56.0 release.

  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

[kelset]

👋 Linus!
Thanks for the details, I have to admit I don't know enough about the npm publishing process to give you a proper answer. So I'll ping @hramos && @grabbou whom may answer to that.

That said, I feel that the solution to this may somewhat be related to the other issue you linked (#20015) - we are currently investigating it with the core.

In the meantime, to use Typescript, have you checked if you can use the approach explained here?

[LinusU]

Thanks for pointing me to that TypeScript guide. The drawback of that approach is that it a two-step build time, first compiling the TypeScript with tsc, and then feeding that output into Babel. My goal is to be able to skip tsc altogether and let Babel handle the TypeScript right away.