metro-plugin-cyclic-dependencies-detector does not work with expo-router

[trcoffman]

What happened?

I'm trying to get metro-plugin-cyclic-dependencies-detector to work. I have multiple import cycles in my app and this plugin is not detecting them and blowing up the way it should.

First off: the docs are wrong about how to set it up with expo. If you do it as suggested in the docs it causes a stack overflow due to unbounded recursion.

This is what I came up with to prevent the infinite recursion.

// Learn more https://docs.expo.io/guides/customizing-metro
const { CyclicDependencies } = require('@rnx-kit/metro-plugin-cyclic-dependencies-detector');
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

const expoSerializer = config.serializer.customSerializer;

config.serializer.customSerializer = async (entryPoint, preModules, graph, options) => {
  CyclicDependencies({
    throwOnError: true,
  })(entryPoint, preModules, graph, options);
  return await expoSerializer(entryPoint, preModules, graph, options);
};

module.exports = config;

Affected Package

@rnx-kit/metro-plugin-cyclic-dependencies-detector

Version

2.0.0

Which platforms are you seeing this issue on?

• Android
• iOS
• macOS
• Windows

System Information

❯ npx react-native info                

⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:


  "devDependencies": {
    "@react-native-community/cli": "latest",
  }

Steps to Reproduce

1. Use my metro config above in an expo project
2. Introduce a cyclic dependency between 2 modules.
3. Run the bundler and see that it doesn't fail.

Code of Conduct

• I agree to follow this project's Code of Conduct

[trcoffman]

Ok, after looking into this further, it looks like it's because of expo-router.

The dependency cycles are not within the dependency graph of the entrypoint due to file-based routing.

[tido64]

This plugin relies on Metro's module graph to detect cycles. If it is incomplete, there's not much we can do about it. I've fixed the example and added a disclaimer here: #3869

[trcoffman]

@tido64 I figured out how to get it to work with expo-router:

// Learn more https://docs.expo.io/guides/customizing-metro
const { CyclicDependencies } = require('@rnx-kit/metro-plugin-cyclic-dependencies-detector');
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

const expoSerializer = config.serializer.customSerializer;

config.serializer.customSerializer = async (entryPoint, preModules, graph, options) => {
  const checkDependencies = CyclicDependencies({
    throwOnError: true,
  });
  checkDependencies(entryPoint, preModules, graph, options);
  checkDependencies(
    graph.dependencies
      .keys()
      .filter((key) => key.includes('/app?ctx='))
      .next().value,
    preModules,
    graph,
    options,
  );
  return await expoSerializer(entryPoint, preModules, graph, options);
};

module.exports = config;

I discovered that all expo-router modules in the /app directory are dependencies of a module that is named something like .../app?ctx=<some-random-hash-value>.

So if you do it like this, it works flawlessly with expo-router apps.

[tido64]

@tido64 I figured out how to get it to work with expo-router:

Nice! I've added a link to your comment for everyone: #3874