error Cannot find module 'metro-cache/private/stores/FileStore'

[MPiccinato]

What happened?

Attempting to get Uniwind working in a NX monorepo and am having an issue.

React Native - 0.81.4
@nx/react-navite - 20.7.2

The withNxMetro function is a promise so it isn't the last item exported from metro.config.js.

Is there a reason why the private paths are used on import? If I patch to use const { FileStore: FileStoreBase } = require('metro-cache'); and const { Graph } = require("metro/src/DeltaBundler/Graph"); it works.

Here is the metro.config.js:

const {withNxMetro} = require('@nx/react-native');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const {withUniwindConfig} = require('uniwind/metro');

const defaultConfig = getDefaultConfig(__dirname);
const {assetExts, sourceExts} = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('@react-native/metro-config').MetroConfig}
 */
const customConfig = {
  cacheVersion: 'v1',
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
  },
};

const uniwindConfig = withUniwindConfig(
  mergeConfig(defaultConfig, customConfig),
  {
    cssEntryFile: './src/app/components/kit/theme/global.css',
    dtsFile: './src/app/components/kit/theme/uniwind-types.d.ts',
  },
);

module.exports = withNxMetro(uniwindConfig, {
  // Change this to true to see debugging info.
  // Useful if you have issues resolving modules
  debug: false,
  // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
  extensions: [],
  // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
  watchFolders: [],
});

and the error in the console:

error Cannot find module 'metro-cache/private/stores/FileStore'
Require stack:
- /private/var/code/app-monorepo/node_modules/uniwind/dist/metro/index.cjs
- /private/var/code/app-monorepo/frontend/apps/app-customer/metro.config.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/import-fresh/index.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/cosmiconfig/dist/loaders.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/cosmiconfig/dist/createExplorer.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/cosmiconfig/dist/index.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/metro-config/src/loadConfig.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/metro-config/src/index.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/dist/utils/loadMetroConfig.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/dist/commands/bundle/buildBundle.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/dist/commands/bundle/index.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/dist/index.js
- /private/var/code/app-monorepo/node_modules/react-native/react-native.config.js.
Error: Cannot find module 'metro-cache/private/stores/FileStore'
Require stack:
- /private/var/code/app-monorepo/node_modules/uniwind/dist/metro/index.cjs
- /private/var/code/app-monorepo/frontend/apps/app-customer/metro.config.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/import-fresh/index.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/cosmiconfig/dist/loaders.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/cosmiconfig/dist/createExplorer.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/cosmiconfig/dist/index.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/metro-config/src/loadConfig.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/node_modules/metro-config/src/index.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/dist/utils/loadMetroConfig.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/dist/commands/bundle/buildBundle.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/dist/commands/bundle/index.js
- /private/var/code/app-monorepo/node_modules/@react-native/community-cli-plugin/dist/index.js
- /private/var/code/app-monorepo/node_modules/react-native/react-native.config.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1420:15)
    at defaultResolveImpl (node:internal/modules/cjs/loader:1058:19)
    at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1063:22)
    at Module._load (node:internal/modules/cjs/loader:1226:37)
    at TracingChannel.traceSync (node:diagnostics_channel:328:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:245:24)
    at Module.require (node:internal/modules/cjs/loader:1503:12)
    at require (node:internal/modules/helpers:152:16)
    at Object.<anonymous> (/private/var/code/app-monorepo/node_modules/uniwind/dist/metro/index.cjs:3:23)
    at Module._compile (node:internal/modules/cjs/loader:1760:14)

and finally the nx.json

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default"
    }
  },
  "targetDefaults": {
    "build": {
      "cache": true,
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    },
    "test": {
      "cache": true,
      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
    },
    "@nx/eslint:lint": {
      "cache": true,
      "inputs": [
        "default",
        "{workspaceRoot}/.eslintrc.json",
        "{workspaceRoot}/.eslintignore",
        "{workspaceRoot}/eslint.config.js"
      ]
    },
    "@nx/esbuild:esbuild": {
      "cache": true,
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/.eslintrc.json",
      "!{projectRoot}/eslint.config.js",
      "!{projectRoot}/eslint.config.mjs",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/src/test-setup.[jt]s",
      "!{projectRoot}/test-setup.[jt]s"
    ],
    "sharedGlobals": []
  },
  "plugins": [
    {
      "plugin": "@nx/eslint/plugin",
      "options": {
        "targetName": "lint"
      }
    },
    {
      "plugin": "@nx/jest/plugin",
      "options": {
        "targetName": "test"
      }
    },
    {
      "plugin": "@nx/react-native/plugin",
      "options": {
        "startTargetName": "start",
        "upgradeTargetName": "update",
        "bundleTargetName": "bundle",
        "podInstallTargetName": "pod-install",
        "runIosTargetName": "run-ios",
        "runAndroidTargetName": "run-android",
        "buildIosTargetName": "build-ios",
        "buildAndroidTargetName": "build-android",
        "syncDepsTargetName": "sync-deps"
      }
    }
  ]
}

Steps to Reproduce

I'll see if I can get smaller reproducible setup.

Snack or Repository Link

Working on it

Uniwind version

1.2.2

React Native Version

0.81.4

Platforms

iOS

Expo

No

Additional information

• I've searched for similar issues in this repository and found none

[Brentlok]

Hi, thanks for reporting the issue.
It works fine on simpler setup. Maybe withNxMetro since we're not the last party that updates config. To be fair it's a first time that someone tries to use uniwind with nx.
Waiting for reproduction and more updates from your end 😄

[jpudysz]

Closing for now due to now response/activity. We're happy to help with repro.

[byrizki]

hi @Brentlok @jpudysz this seems related to react/metro@2d0c49a the metro private alias is introduced in metro v0.81.2, it will causing this kind error if we try uniwind with RN that bundled with metro v0.81.1 below, in my case I got this error on RN v0.75.5 bundled with metro v0.80.12

[jpudysz]

Oh man thats old version of RN! Its no longer supported for many months. We definitely follow this release schedule:

https://reactnative.dev/versions

So I think it's understandable that we not gonna support it for older versions of React Native releases 2+ years ago.