Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader.

[fabrilallo]

Hello!

After building my Nuxt.js application that utilizes the nuxt-mapbox library, I encountered the following error when attempting to run the application:

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'https:'
    at new NodeError (node:internal/errors:405:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:131:11)
    at defaultLoad (node:internal/modules/esm/load:82:3)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:603:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

Environment:

• Nuxt Version: 3.7.0
• Nuxt-Mapbox Version: 1.4.3
• Node.js Version: 18.17.1
• Operating System: macOS 13.5.1

Reproduction Steps:

1. Install and configure a Nuxt.js project.
2. Add and configure the nuxt-mapbox library in the project.
3. Build the Nuxt.js application.
4. Attempt to run the application using the node .output/server/index.mjs

Expected Behavior:

I expected the Nuxt.js application to build and run without errors, including when using the nuxt-mapbox library.

Actual Behavior:

The application fails to run, and I receive the error mentioned above.

• I followed the installation and configuration steps provided in the nuxt-mapbox documentation.
• The application works as expected in development mode (npm run dev), but the error occurs when trying to build it for production.

Any suggestions? Thanks!

BTW great job! @AlexLavoie42

[AlexLavoie42]

Could you try using Nuxt 3.6.5 and see if you still get the same error? I have not tested with 3.7 at all yet so it could be a breaking change there (seems like its coming from the one of the url imports?)

[fabrilallo]

Thanks for the super fast response! Yes, I will try! The error seems coming from this dynamic import in the initGeocoder() function: await import('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js');

[AlexLavoie42]

I have also just released v1.4.4 of the module which fixes an issue with this exact import, so it might be worth trying that as well.

[fabrilallo]

BTW i just tried for curiosity with the new version 1.4.4 you just released and nuxt 3.7.0, and now I'm not getting that error anymore 😄

[AlexLavoie42]

Awesome! Seems like the same root cause as #61, Nuxt 3.7 must just do a better job of catching the error.