Skip to main content

metro-serializer

Build npm version

@rnx-kit/metro-serializer is Metro's default JavaScript bundle serializer, but with support for plugins.

Usage​

Import and set the serializer to serializer.customSerializer in your metro.config.js, then add your desired plugins. For instance, to add CyclicDependencies and DuplicateDependencies plugins:

 const { makeMetroConfig } = require("@rnx-kit/metro-config");
+const {
+  CyclicDependencies,
+} = require("@rnx-kit/metro-plugin-cyclic-dependencies-detector");
+const {
+  DuplicateDependencies,
+} = require("@rnx-kit/metro-plugin-duplicates-checker");
+const { MetroSerializer } = require("@rnx-kit/metro-serializer");

 module.exports = makeMetroConfig({
   projectRoot: __dirname,
   serializer: {
+    customSerializer: MetroSerializer([
+      CyclicDependencies(),
+      DuplicateDependencies(),
+    ]),
   },
 });

Expo​

If you are using Expo, you most likely don't want to use this serializer, since Expo uses its own custom serializer. For instance, to use the CyclicDependencies and DuplicateDependencies plugins without the serializer:

const { getDefaultConfig } = require("expo/metro-config");

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

config.serializer.customSerializer = async (
  entryPoint,
  preModules,
  graph,
  options
) => {
  CyclicDependencies({
    // Options
  })(entryPoint, preModules, graph, options);
  DuplicateDependencies({
    // Options
  })(entryPoint, preModules, graph, options);
  return await config.serializer.customSerializer(
    entryPoint,
    preModules,
    graph,
    options
  );
};

module.exports = config;