Configuration for React Native

[terreb]

This is a:

• Bug Report
• Feature Request
• Question
• Other

Which concerns:

• flow-runtime
• babel-plugin-flow-runtime
• flow-runtime-validators
• flow-runtime-mobx
• flow-config-parser
• The documentation website

---

What is the current behaviour?

require is not defined on app start up

---

What is the expected behaviour?

App starts correctly

---

Which package versions are you using?

react-native: 0.57.8
flow-runtime: 0.17.0
babel-plugin-flow-runtime: 0.19.0

.babelrc

{
  "presets": [
    "module:metro-react-native-babel-preset",
    "@babel/preset-flow",
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-flow-strip-types"
    ],
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "flow-runtime",
      {
        "assert": true,
        "annotate": true,
        "optInOnly": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions"
  ]
}

I haven't found a correct configuration for react-native 0.57+ and babel 7 on Internet. This might be me doing something wrong. I tried my best to convert the configuration from here to use with react-native and babel 7 though.

[terreb]

There is another similar issue #205, but as I see the error is different and configuration there seems to be for Babel 6.

[terreb]

An update, if I remove:

    [
      "@babel/plugin-transform-flow-strip-types"
    ]

... from .babelrc, then I get Unexpected token { on app start up instead of the error above.

[terreb]

Ok, the issue is with import type and restructuring. Here is a piece of code where it fails:

import type {
    ____ViewStyleProp_Internal as ViewStyleType,
    ____TextStyleProp_Internal as TextStyleType,
    ____ImageStyleProp_Internal as ImageStyleType,
} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'

which gets transformed into:

import { ____ViewStyleProp_Internal as _ViewStyleType, ____TextStyleProp_Internal as _TextStyleType, ____ImageStyleProp_Internal as _ImageStyleType } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';

I have import + restructuring all over the code, but only in this place where I have import type it's not transformed. If I remove flow-runtime it gets transformed correctly. How do I change my .babelrc to first transform import type {} into es5 and only then have it processed by flow-runtime?

[terreb]

The reason it's not working only in that place is because I have // @flow-runtime pragma only in that file, so only that one is being processed by flow-runtime. Now, my question is why imports and destructuring are not transpiled by babel if I enable flow-runtime for that file?