Require cycle: node_modules/core-js/internals/microtask.js warning

[KrisLau]

Description

Getting this error when I build my React Native app

 ERROR  RangeError: Maximum call stack size exceeded, js engine: hermes
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 WARN  Require cycle: node_modules\core-js\internals\microtask.js -> node_modules\core-js\internals\microtask.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

React Native version:

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i5-6600 CPU @ 3.30GHz
    Memory: 2.12 GB / 15.89 GB
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.18.1 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7199119
    Visual Studio: Not Found
  Languages:
    Java: 11.0.10
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.2 => 17.0.2
    react-native: ^0.64.2 => 0.64.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

I'm not sure what caused it but it is similar to this commenter and issue #31173. The solution provided in #31173 is to disable Hermes but I would like to leave Hermes enabled since it is supposed to provide performance improvements.

Expected Results

No error in Metro

Snack, code example, screenshot, or link to a repository:

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[safaiyeh]

Thanks for the issue @KrisLau would need more information then just the error message. Could you provide a repo that demonstrates the error from a fresh template.

[KrisLau]

@safaiyeh Sorry it's taken me so long to get back to you! So I figured out the part that's causing the error but I'm unsure how to resolve it as it was working prior. It's being caused by the AppRegistry.registerComponent(appName, () => Root); when I change the Root to App, it works fine but I would like to have the dev meu toggle visible still. Also, another weird thing to note is that my code as-is works well in iOS with only the require cycle error (as opposed to on android where i also get an Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication) error)
I had followed the instructions from this blog: https://spicyseashells.com/article/react-native-storybook to implement the dev menu toggle for storybook.

My code (excluding import statements for brevity):

**// index.js**
AppRegistry.registerComponent(appName, () => Root);

**// Root.tsx**
const Root = () => {
  const [storybookActive, setStorybookActive] = useState(false);
  const toggleStorybook = useCallback(
    () => setStorybookActive(active => !active),
    [],
  );

  useEffect(() => {
    if (__DEV__) {
      // eslint-disable-next-line @typescript-eslint/no-var-requires
      const DevMenu = require('react-native-dev-menu');
      DevMenu.addItem('Toggle Storybook', toggleStorybook);
    }
  }, [toggleStorybook]);

  return storybookActive ? <Storybook /> : <App />;
};

**// storybook/index.js**
const StorybookUIRoot = getStorybookUI({
  host: Platform.OS === 'android' ? '10.0.2.2' : '0.0.0.0',
  asyncStorage: AsyncStorage,
});

AppRegistry.registerComponent(appName, () => StorybookUIRoot);

export default StorybookUIRoot;

[KrisLau]

Any updates on this? When I set inlineRequires = false, the app builds successfully but I'd like to keep inline require enabled if possible

[vladi-strilets]

I'm getting the same issue as @KrisLau. And it's also relative to Storybook.

Even the simple boolean-based export type creates troubles (in my case, react-hook-form stops working)

// App.tsx
...
export default config.storybook.LOAD_STORYBOOK ? StorybookUI : App

The only warning I'm getting is about the Require cycle

The unique working solution is to set inlineRequires: false in metro.config.js.

[KrisLau]

@safaiyeh Any ideas on what might be causing this?

[404-html]

Looks like this have not too much to do with RN itself and warning is properly thrown in that case.
This seems to be a problem with Storybook for ReactNative and it should be addressed with next version.
See more here: storybookjs/react-native#240

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.