[ERR_UNSUPPORTED_ESM_URL_SCHEME] - Module Federation Example

[hifiguitarguy]

Environment

Windows 11 Node v16.13.1

Description

[start:*host] Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:' [start:*host] at new NodeError (node:internal/errors:371:5) [start:*host] at defaultResolve (node:internal/modules/esm/resolve:1016:11) [start:*host] at ESMLoader.resolve (node:internal/modules/esm/loader:422:30) [start:*host] at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40) [start:*host] at ESMLoader.import (node:internal/modules/esm/loader:276:22) [start:*host] at importModuleDynamically (node:internal/modules/cjs/loader:1041:29) [start:*host] at importModuleDynamicallyWrapper (node:internal/vm/module:437:21) [start:*host] at importModuleDynamically (node:vm:381:46) [start:*host] at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14) [start:*host] at loadWebpackConfig (..\host\node_modules@callstack\repack\dist\webpack\loadWebpackConfig.js:14:5) [start:*host] Emitted 'error' event on Compiler instance at: [start:*host] at Worker. (..\host\node_modules@callstack\repack\dist\webpack\Compiler.js:106:14) [start:*host] at Worker.emit (node:events:390:28) [start:*host] at MessagePort. (node:internal/worker:232:53) [start:*host] at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:562:20) [start:*host] at MessagePort.exports.emitMessage (node:internal/per_context/messageport:23:28)

Reproducible Demo

https://github.com/callstack/repack-examples start:host on Windows will fail to bundle on request for 'host' on 8081

[hifiguitarguy]

I will at least suggest VSCode Container Remotes as a workaround (keep it in Linux). Has been working well for SSH-to-Mac as well.

[onurkantar]

No solution yet?

[onurkantar]

I changed webpack.config.mjs to webpack.config.cjs (the code too ofc). It worked for me.

[ViniciusUrias]

Same problem here, couldn't solve yet

[piccinnigius]

same here, @onurkantar i've tried but after i got problems on imports Script, ScriptManager etc.

Any adivice? 🙏 @RafikiTiki

[RafikiTiki]

I remember someone with a similar issue mentioned changing the webpack.config file extension to just .js helped in their case.

Unfortunately, I don't have a Windows machine available to test and fix this. If anyone from this group, who's facing this issue, can investigate it in order to find and eliminate the root cause, please do, I'd very much appreciate the help.

[piccinnigius]

Hi @RafikiTiki thanks a lot for answer, i'm trying but i'm not a webpack expert. The thing that I know is that the error is raised after this:

dist/webpack/Compiler.js

if (sendProgress) {
      console.log('getAsset', filename, platform, sendProgress, 'sendProgress');
      this.progressSenders[platform] = this.progressSenders[platform] ?? [];
      console.log('getAsset', filename, platform, this.progressSenders[platform], 'sendProgress2');
      this.progressSenders[platform].push(sendProgress);
    }

this is the log:

i [12:08:57.694Z][DevServer] Server listening at http://0.0.0.0:8081 
i [12:08:58.021Z][DevServer] Hermes device connected { deviceId: 0 } 
? [12:08:58.023Z][DevServer] Message client connected { clientId: 'client#0' } 
? [12:08:58.025Z][DevServer] Message client connected { clientId: 'client#1' } 
i [12:08:58.026Z][DevServer] Hermes device connected { deviceId: 1 } 
getAsset index.bundle android [Function: sendProgress]
getAsset index.bundle android [Function: sendProgress] spawnWorker
getAsset index.bundle android [Function: sendProgress] sendProgress
getAsset index.bundle android [] sendProgress2
node:internal/event_target:1033
process.nextTick(() => { throw err; });
                        ^

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:'
 at new NodeError (node:internal/errors:399:5)
 at throwIfUnsupportedURLScheme (node:internal/modules/esm/resolve:964:11)
 at ESMLoader.defaultResolve (node:internal/modules/esm/resolve:1040:3)
 at ESMLoader.resolve (node:internal/modules/esm/loader:323:32)
 at ESMLoader.getModuleJob (node:internal/modules/esm/loader:172:38)
 at ESMLoader.import (node:internal/modules/esm/loader:276:22)
 at importModuleDynamically (node:internal/modules/cjs/loader:1205:37)
 at importModuleDynamicallyWrapper (node:internal/vm/module:428:21)
 at importModuleDynamically (node:internal/vm:105:46)
 at importModuleDynamicallyCallback (node:internal/modules/esm/utils:85:14)
Emitted 'error' event on Compiler instance at:
 at Worker.<anonymous> (D:\prj\node_modules\@callstack\repack\dist\webpack\Compiler.js:111:14)
 at Worker.emit (node:events:512:28)
 at MessagePort.<anonymous> (node:internal/worker:247:53)
 at [nodejs.internal.kHybridDispatch] (node:internal/event_target:758:20)
 at exports.emitMessage (node:internal/per_context/messageport:23:28)

Node.js v19.8.1

i've tried with different node versions (16,17,18,19)

any hint?

[piccinnigius]

ok, now i'm going deep: investingating on getWebpackEnvOptions, where the crash is located and function never be called

[piccinnigius]

@RafikiTiki i was able to make it run by this really poor workaround:

in webpack.config.mjs setting dirname=context

in dist/webpack/webpackWorker.js:

async function main(_cliOptions) {
  const cliOptions = {
    ..._cliOptions,
    config:{
      ..._cliOptions.config,
      webpackConfigPath: "file://"+_cliOptions.config.webpackConfigPath,
      root: _cliOptions.config.root,
      reactNativePath: _cliOptions.config.reactNativePath
    },
    arguments:{
      start: {
        ..._cliOptions.arguments.start,
        webpackConfig: "file://"+_cliOptions.arguments.start.webpackConfig
      }
    }
  }
//...rest

but now i have this error:

EDIT: to fix this ScriptManager not found error add /node_modules(.*[/\\])+@callstack/, in babel loader section of webpack config

[piccinnigius]

@RafikiTiki I don't know how to make a pull request that doesn't break anything or where to change to integrate the fix into source, but I remain at your complete disposal if testers are needed, hoping that this fix will go in main soon. Thanks so much in advance for your and your team work.

[ViniciusUrias]

Sometimes i have this URL problem, sometimes I end up with 'cant find variable webpack_require' I'm 99% sure this is a windows problem, and the solutions above didnt solve.

[jbroma]

Closing as this issue was fixed in 3.5.0