React Native报错Cannot read property 'split' of undefined及Metro Bundler退出求助

Alright, let's tackle these two linked issues you're facing: the Metro Bundler crashing with exit code 1, and the Cannot read property 'split' of undefined runtime error. Here's a breakdown of the possible causes and step-by-step fixes:

一、First, Fix the Metro Bundler Crash (Exit Code 1) #

Metro exiting with code 1 usually means a fatal error during the bundling process. Here are the most common fixes:

• Clear Metro's Cache
  Corrupted cache is the #1 culprit for this kind of crash. Run this command to reset it:

  # For Expo projects
  expo start -c
  
  # For vanilla React Native projects
  npx react-native start --reset-cache
  

• Check Dependency Compatibility
  Your project uses several libraries (Expo, react-native-webview, react-native-splash-screen) that might have version mismatches:

  • Confirm react-native-webview matches your Expo SDK version (check Expo's docs for compatible versions)
  • react-native-splash-screen might not play nice with newer Expo versions—consider switching to Expo's official expo-splash-screen library if needed

• Validate Configuration Files
  Make sure your babel.config.js has the correct Expo preset (this is required for Expo projects):

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
    };
  };
  

  If you have a custom metro.config.js, double-check for syntax errors or misconfigured path resolvers.

二、Fix the "Cannot read property 'split' of undefined" Error #

This runtime error happens when you try to call .split() on a variable that's undefined. Let's look at your code and potential fixes:

• Unused Deprecated Library
  You imported expo-permissions but never used it. This library was deprecated in Expo SDK 38+, and old versions can cause string-parsing errors (like the split issue) when interacting with newer Expo tools. Delete this line:

  import * as Permissions from 'expo-permissions'
  

• Unbound WebView Ref
  You created WEBVIEW_REF but never attached it to your WebView component. This means this.WEBVIEW_REF.current is undefined when you try to call goBack()—while this throws a different error on its own, it can contribute to unstable bundling. Fix it by adding the ref to your WebView:

  render() {
    return (
      <WebView
        ref={this.WEBVIEW_REF} // Add this line
        source={{ uri: 'https://htomato.netlify.app/' }}
        style={{ marginTop: 20 }}
        onNavigationStateChange={this.onNavigationStateChange.bind(this)}
      />
    );
  }
  

• Uninitialized State
  Your onNavigationStateChange calls this.setState but you never initialized the component state. While React allows this, it can cause unexpected behavior. Add state initialization to your constructor:

  constructor(props) {
    super(props);
    this.WEBVIEW_REF = React.createRef();
    this.state = { canGoBack: false }; // Initialize state here
  }
  

三、Full Fixed App.js Code #

Here's the revised version of your code with all fixes applied:

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { Platform, BackHandler } from 'react-native';
import SplashScreen from 'react-native-splash-screen';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.WEBVIEW_REF = React.createRef();
    this.state = { canGoBack: false };
  }

  componentDidMount() {
    setTimeout(() => SplashScreen.hide(), 1000);
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }

  handleBackButton = () => {
    // Guard clause to avoid calling goBack on undefined
    if (this.WEBVIEW_REF.current && this.state.canGoBack) {
      this.WEBVIEW_REF.current.goBack();
      return true;
    }
    // Allow default back behavior if we can't go back in WebView
    return false;
  }

  onNavigationStateChange = (navState) => {
    this.setState({ canGoBack: navState.canGoBack });
  }

  render() {
    return (
      <WebView
        ref={this.WEBVIEW_REF}
        source={{ uri: 'https://htomato.netlify.app/' }}
        style={{ marginTop: 20 }}
        onNavigationStateChange={this.onNavigationStateChange}
      />
    );
  }
}

Final Steps to Apply Fixes #

1. Delete the unused expo-permissions import
2. Update your App.js with the fixed code above
3. Clear Metro cache with expo start -c
4. If issues persist, delete node_modules, package-lock.json/yarn.lock, then run npm install or yarn install to reinstall dependencies

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