how to Add @babel/plugin-transform-flow-strip-types (https://git.io/vb49g) to the 'plugins' section of your Babel config to enable transformation?

Question

am using react native web and want to add react navigation 5 to the project. However when I try building the web version upon adding react-navigation I get

./node_modules/react-native-gesture-handler/DrawerLayout.js
SyntaxError: D:\Parentlane\ReactNativeWeb\node_modules\react-native-gesture-handler\DrawerLayout.js: Support for the experimental syntax 'flow' isn't currently enabled (30:8):

  28 | const SETTLING = 'Settling';
  29 | 
> 30 | export type PropType = {
     |        ^
  31 |   children: any,
  32 |   drawerBackgroundColor?: string,
  33 |   drawerPosition: 'left' | 'right',

Add @babel/plugin-transform-flow-strip-types (https://git.io/vb49g) to the 'plugins' section of your Babel config to enable transformation.

I added plugin-transform-flow-strip-types as a dev dependency but that does not help.

below is my package.json

{
  "name": "ReactNativeWeb",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "react-scripts start",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.7.6",
    "axios": "^0.20.0",
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "qs": "^6.9.4",
    "react": "16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "0.63.2",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-reanimated": "^1.13.1",
    "react-native-safe-area-context": "^3.1.8",
    "react-native-screens": "^2.11.0",
    "react-native-vector-icons": "^7.1.0",
    "react-native-web": "^0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-transform-flow-strip-types": "^7.10.4",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "@babel/runtime": "^7.11.2",
    "@react-native-community/eslint-config": "^2.0.0",
    "metro-react-native-babel-preset": "^0.63.0",
    "react-scripts": "^3.4.3",
    "react-test-renderer": "16.13.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

babel.config.js is as follows:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

could anyone tell me how to add the plugin inside babel.config.js?or is there any other way to resolve the above error?

Any suggestions would be great and let me know if any other detail is required for better understanding.

Answer 1

You could add it inside your babel config file. Include it in your plugins.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['@babel/plugin-transform-flow-strip-types'],
};

And install it with npm like this

npm install --save-dev @babel/plugin-transform-flow-strip-types

---

Check the docs here -> https://babeljs.io/docs/en/babel-plugin-transform-flow-strip-types

Answer 2

Add plugin plugin-transform-flow-strip-types in file babel.config.js and enable allowDeclareFields

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
     ...
     ['@babel/plugin-transform-flow-strip-types', { allowDeclareFields: true }]
  ],
};

For install plugin:

npm install --save-dev @babel/plugin-transform-flow-strip-types

//or

yarn add --dev @babel/plugin-transform-flow-strip-types

Answer 3

Apparently this "helpful" message is the default error message when "neither Flow nor Typescript are enabled in Babel".

Personally I came across it when using a Typescript project and attempting to import something from within a monorepo but outside the current scope - it's then throwing this error when it encounters the TS keyword "interface".

Fixing this will probably depend on your own project setup - however, if you're not using Flow it's unlikely that adding any of the recommended Babel/flow plugins will help.