React Native问题：尝试清除require.cache时发现其值为undefined

Hey there, I totally get the frustration here—using require.cache to reload modules works like a charm in Node.js, but React Native’s module system is fundamentally different from Node’s, which is why require.cache is undefined here. Let me break down why this happens and what you can do instead:

React Native uses the Metro bundler to package your code, and its module loading mechanism isn’t based on Node.js’s CommonJS system. Node’s require.cache is a feature specific to its CommonJS implementation, used to cache loaded modules for performance. But in RN:

• Modules are processed and bundled at build time (even in development)
• There’s no runtime module caching system that exposes a require.cache object for you to manipulate

1. Use Fast Refresh (for development) #

React Native’s built-in Fast Refresh is designed to automatically reload modules when you make code changes—you shouldn’t need to manually clear cache in most dev scenarios. If it’s not working as expected:

• Shake your simulator/device and select "Enable Fast Refresh"
• If you modified config files (like babel.config.js or metro.config.js), restart the Metro server (press r in the terminal running Metro, or stop and restart with npx react-native start)
• For stubborn cases, try clearing Metro’s cache entirely with:

  npx react-native start --reset-cache
  

2. Dynamic import() for Runtime Reloads #

If you need to manually reload a module at runtime (e.g., for dynamic component loading), replace static require() with dynamic import(). Unlike require(), dynamic imports return a Promise and will re-fetch the module on each call in development (note: this won’t work in production since modules are bundled statically). Example:

// Instead of static require
// const MyDynamicComponent = require('./MyDynamicComponent');

// Use dynamic import for reloadable modules
const reloadMyComponent = async () => {
  const { default: MyDynamicComponent } = await import('./MyDynamicComponent');
  // Use the reloaded component in your render logic
  setComponent(MyDynamicComponent);
};

3. Custom Cache Management (if you need full control) #

If you want to implement your own caching logic (e.g., to skip cache in dev but keep it in production), you can create a simple cache object:

const moduleCache = {};

const getReloadableModule = async (modulePath) => {
  // In development, skip cache to force reload
  if (__DEV__) {
    const module = await import(modulePath);
    return module.default;
  }
  // In production, reuse cached modules
  if (!moduleCache[modulePath]) {
    const module = await import(modulePath);
    moduleCache[modulePath] = module.default;
  }
  return moduleCache[modulePath];
};

In production, Metro bundles all your code into a single (or split) bundle file—there’s no way to dynamically reload modules at runtime because they’re already included in the bundle. If you need dynamic content, consider loading remote resources (like JSON configs or assets) instead of trying to reload JS modules.

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