React Native 0.71添加新组件或页面时出现语法错误求助

Hey there, I’ve dealt with this exact frustrating issue in RN 0.71.0 before—nothing’s worse than having to restart your dev server every time you add a new component or page. Let’s walk through some proven fixes that should resolve this:

1. Tweak Metro’s File Watching Settings #

React Native 0.71.0 updated the Metro bundler, and sometimes it fails to automatically detect new files. Update your metro.config.js to ensure it’s watching your project root and adjust cache settings:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const customConfig = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  ...customConfig,
  watchFolders: [__dirname], // Forces Metro to watch your entire project directory
  // Disable cache temporarily to test if this is the root cause
  cacheStores: [],
});

After saving this change, run yarn start --reset-cache to clear existing cache. If this fixes the issue, you can re-enable cache later by removing the cacheStores line—keeping watchFolders is still a good idea.

2. Verify Babel Plugin Setup (If Using Aliases) #

If you’re using babel-plugin-module-resolver for path aliases, it might not be picking up new files. Double-check your babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@': './src', // Adjust this to match your alias setup
        },
      },
    ],
  ],
};

If you haven’t installed the plugin yet, run yarn add babel-plugin-module-resolver --dev first.

3. Automate Cache Reset (Temporary Workaround) #

If you need a quick fix while troubleshooting, add a script to your package.json that clears cache on startup:

"scripts": {
  "start": "react-native start --reset-cache",
  "android": "react-native run-android",
  "ios": "react-native run-ios"
}

This adds a few seconds to startup time but eliminates the need to manually restart the server every time you add a file.

4. Update React Native CLI #

A mismatched CLI version can cause weird bundler issues. Update your global CLI:

yarn global add @react-native-community/cli

Or if you’re using a local project CLI:

yarn add @react-native-community/cli --dev

Start with the Metro config tweak and cache reset—those are the most common fixes for this specific RN 0.71.0 bug. Hope one of these gets you back to smooth development!

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