React Native升级至0.56.0后出现Unexpected identifier 'PropTypes'报错求助

I’ve run into similar Babel/Flow compatibility snags when migrating React Native projects to Babel 7 (which RN 0.56.x adopts), so let’s break down how to resolve this:

Root Cause #

The error is almost certainly tied to the flow-react-proptypes plugin in your Babel config. Older versions of this plugin don’t properly handle Flow’s export type syntax with Babel 7. When it processes exported Flow types, it generates invalid PropTypes-related code that triggers the "Unexpected identifier" syntax error.

Step-by-Step Solutions #

1. Verify the Plugin is the Culprit
   First, temporarily disable the flow-react-proptypes plugin in your .babelrc to confirm it’s causing the issue:

   {
     "presets": ["babel-preset-react-native", "@babel/preset-flow"],
     "env": {
       "development": {
         // Comment out the plugin temporarily
         // "plugins": [["flow-react-proptypes", { "ignoreNodeModules": true }]]
       }
     },
     "plugins": [
       ["@babel/plugin-proposal-decorators", { "legacy": true }],
       ["@babel/plugin-proposal-class-properties", { "loose": true }]
     ],
     "comments": false
   }
   

   Run your app again. If the error disappears, this plugin is definitely the source of the problem.

2. Update flow-react-proptypes to a Babel 7-Compatible Version
   Old versions of flow-react-proptypes lack proper Babel 7 support. Install the latest compatible version:

   npm install flow-react-proptypes@latest --save-dev
   # or
   yarn add flow-react-proptypes@latest --dev
   

   Re-enable the plugin in your .babelrc and test your app again.

3. Align All Babel Dependency Versions
   Your package.json has mismatched Babel versions (e.g., @babel/plugin-proposal-class-properties is 7.5.0 while other Babel packages are stuck on 7.0.0-beta.47). This version inconsistency can cause hidden conflicts. Update all Babel packages to a consistent stable version (like 7.5.x):

   {
     "@babel/cli": "^7.5.5",
     "@babel/core": "^7.5.5",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-decorators": "^7.5.0",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-flow": "^7.0.0",
     "react": "16.4.1",
     "react-native": "0.56.0"
   }
   

   Run npm install or yarn install to sync your dependencies.

4. Clear React Native’s Cache
   Cached old compilation artifacts can linger even after config changes. Reset the cache with:

   react-native start --reset-cache
   

Final Checks #

• Double-check that babel-preset-react-native is updated to the version compatible with RN 0.56.0 (it should be ^5.0.2 by default, but confirm in your package.json).
• Ensure your Flow version is compatible with both your Babel preset and React Native 0.56.0.

内容的提问来源于stack exchange，提问作者Dinesh Chitta