ERR_UNSUPPORTED_ESM_URL_SCHEME

[eraycetinx]

I'm using react-native-community/cli. I did everything according to the documentation but I am getting this error.

error Error loading Metro config at: C:\Project\metro.config.js Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'. Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:' at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:227:11) at defaultLoad (node:internal/modules/esm/load:109:3) at ModuleLoader.load (node:internal/modules/esm/loader:666:12) at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:479:43) at #createModuleJob (node:internal/modules/esm/loader:503:36) at #getJobFromResolveResult (node:internal/modules/esm/loader:274:34) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:41) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:542:25)

metro.config.js
`const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = mergeConfig(getDefaultConfig(__dirname), {
/* your config */
});

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

repo: https://github.com/eraycetinx/workshopUI/tree/design (metro.config.js file is not modified)

[mistermine102]

Have you found a solution to that? I spent many hours trying to fix that and came out empty handed

[eraycetinx]

No, I still haven't found a solution.

[wuleninja]

I have the same error. It keeps me from updating my project's dependencies, to solve the potentially critical issues with React pre-19.1.2.

[wuleninja]

The only way I've found as a workaround for now to go further into building my app again, is moving my code into WSL. But a React Native project is far from working under WSL2 from the get go (and I'm not there yet).

[ThiagoFrancischini]

Same issue here....

[SharonNg98]

Same issue: I tried file://hostname/path and file:///path but to no avail.

[strotgen]

I ran into this issue on Windows with Node 22 and managed to get it working with two pnpm patches. The ERR_UNSUPPORTED_ESM_URL_SCHEME error occurs because Windows absolute paths (like C:\Users\...) are being passed directly to ESM import(), which requires file:// URLs on Windows.

1. Patch metro-config

The main issue is in metro-config/src/loadConfig.js where it falls back to import(absolutePath) without converting Windows paths to file URLs.

pnpm patch metro-config

In src/loadConfig.js, add var _url = require("url"); to the imports, then change:

const configModule = await import(absolutePath);

to:

const importPath = process.platform === 'win32' ? (0, _url.pathToFileURL)(absolutePath).href : absolutePath;
const configModule = await import(importPath);

Then commit the patch:

pnpm patch-commit <path-to-patch>

2. Patch nativewind

There's also a path concatenation issue in nativewind/dist/metro/tailwind/v3/index.js:

pnpm patch nativewind

Change:

const child_file = __dirname + "/child.js";

to:

const path_1 = require("path");
const child_file = path_1.join(__dirname, "child.js");

Then commit the patch:

pnpm patch-commit <path-to-patch>

3. Install Visual C++ Redistributable

After fixing the path issues, lightningcss requires the Microsoft Visual C++ Redistributable to load its native Windows binary. Install it from:

https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist

Hope this helps someone!

[SharonNg98]

@strotgen hi Strotgen, thanks for your help. However, mine still didn't work after doing as said for Patch metro-config and Patch nativewind. I was applying these changes to an ImageSourcePropType from Expo, so I used {uri: "C:\Users\..."} for the importPath. Is this the correct way to do it?

[markoarsenal]

Changing node_modules\metro-config\src\loadConfig.js worked for me.

Instead of

const configModule = await import(absolutePath);

put

// Fix for Windows: convert Windows path to file:// URL for dynamic import
const pathToImport = path.isAbsolute(absolutePath) && process.platform === 'win32'
  ? (0, _url.pathToFileURL)(absolutePath).href
  : absolutePath;
const configModule = await import(pathToImport);
config = await configModule.default;