Metro “Failed to start watch mode” on Windows when watching shared file

I’m working in a Windows + Expo React Native project and I want to import a JSON file from a top‑level shared/ folder into my mobile/ app while keeping withNativeWind for live CSS.

However, when I add the shared/ folder to watchFolders, Metro crashes during bundling with this error:

Failed to construct transformer:  Error: Failed to start watch mode.
    at Timeout._onTimeout (F:\Programming\Javascript\Roor\mobile\node_modules\metro-file-map\src\Watcher.js:161:24)
    at listOnTimeout (node:internal/timers:594:17)
    at processTimers (node:internal/timers:529:7)
F:\Programming\Javascript\Roor\mobile\node_modules\@expo\cli\build\src\utils\errors.js:130
    throw error;
    ^

TypeError: Cannot read properties of undefined (reading 'getSha1')
    at ensureFileSystemPatched (F:\Programming\Javascript\Roor\mobile\node_modules\react-native-css-interop\src\metro\index.ts:377:11)
    at F:\Programming\Javascript\Roor\mobile\node_modules\react-native-css-interop\src\metro\index.ts:231:17
    at runNextTicks (node:internal/process/task_queues:65:5)
    at listOnTimeout (node:internal/timers:555:9)
    at processTimers (node:internal/timers:529:7)
    at F:\Programming\Javascript\Roor\mobile\node_modules\react-native-css-interop\src\metro\index.ts:237:15

/* eslint-env node */
const path = require('path');
const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');

const appDir = __dirname;
const sharedDir = path.resolve(appDir, '../shared');

const config = getDefaultConfig(appDir);

config.watchFolders = [sharedDir];
config.resolver.extraNodeModules = {
  '@outputs': sharedDir,
};

module.exports = withNativeWind(config, { input: './global.css' });

this is my folder structure

/project-root
  shared/
    amplify_outputs.json
  mobile/
    metro.config.js
    src/app/_layout.tsx
0
Jul 16 at 6:00 AM
User AvatarMnai
#android#reactjs#react-native#expo#metro-bundler

Accepted Answer

Solution was to update my tsconfig file. I didn't think Metro relied on TS because I thought Metro and TypeScript resolution worked separately, but apparently the TS alias was essential for the Metro build. I think Metro relies on the tsconfig to resolve imports, so without it, Metro didn't understand the alias

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@outputs/*": ["../shared/*"]
    }
  },
  "include": ["src/**/*", "../shared/**/*"]
}
User AvatarMnai
Jul 16 at 8:24 AM
0