[NEXT] Crashes on rc.9 and rc.10 `Only file and data URLs are supported by the default ESM loader`

[warflash]

Version

@nuxtjs/i18n: @nuxtjs/[email protected] nuxt: 3.0.0-rc.9

Nuxt configuration

Please change to [x] if relevant for this issue:

• [ ] Applies to a site deployed to a static server (site generated with nuxt generate)
• [x] Applies to a site deployed to a server with a Node backend

Reproduction Link

I tried updating from rc8 to rc9 today and got the error message below when trying to start in dev mode. Tried deleting .nuxt, node_modules as well as package-lock.json to get a fresh install but it all resulted in the same error. Same story for rc10 and edge rc11.

https://github.com/warflash/nuxt_7426

Steps to reproduce

Clone the repo on windows and run npm run dev

What is Expected?

The instance starts as normal

What is actually happening?

500
Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'f:'

at new NodeError (node:internal/errors:371:5)
at defaultResolve (node:internal/modules/esm/resolve:1016:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
at ModuleWrap. (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36)

[warflash]

For reference, that's the nuxt teams take on the issue: https://github.com/nuxt/framework/issues/7426#issuecomment-1252555737

Nice spot. This is a bug in i18n; it generates some code with an absolute import:

import locale_en from "C:/nuxt_7426/locales/en.json";
export const localeCodes = ["en"]

export const localeMessages = {
  "en": () => Promise.resolve(locale_en),
}

This needs to be instead:

import locale_en from "file:///C:/nuxt_7426/locales/en.json";
export const localeCodes = ["en"]

export const localeMessages = {
  "en": () => Promise.resolve(locale_en),
}

[warflash]

Hey @kazupon,

just wondering if you happen to have a rough estimate on this one? It's blocking us from upgrading our nuxt rc version so we're still stuck on rc8 which is kind of unfortunate since there have been a ton of critical fixes since then. If it's not something that can be resolved anytime soon then that's cool as well of course, but a rough timeframe would be nice so we can plan ahead appropriately.

Thank you and thanks for your awesome work! 🔥

[kazupon]

I'm resolving this issue with file protocol, but, I'm a bit stuck with vite why not being able to resolve it 😞

[warflash]

Awesome, thank you - well that's good news then! I'm pretty New to vite and the whole tooling as well so unfortunate I cant comment much on that. Maybe daniel would be able to give advice in this issue though 🙏

[so1ve]

How is it now? I'm stuck with the same problem, my project won't be able to access either page without adding the lazy: true option. However, lazy: true again seems to cause the hydration to fail, producing a whole bunch of warnings.

[huang-julien]

Hi ! it only happens with window for me. A workaound is to run the project on WSL (install + dev/build). I hope this can help !

[mnlj]

What I don't understand here is what is the point of absolute path. I thought that was generally considered a bad practice? I have the same issue on lastest Nuxt rc.12 and @nuxtjs/i18n 8.0.0-alpha.3.

[nuxt] [request error] [unhandled] [500] Only URLs with a scheme in: file, data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

Generated file .nuxt/i18n.options.mjs contains

import locale_hu from "c:/some/project/i18n/json/hu.json";
import locale_i18n from "c:/some/project/i18n/json/i18n.json";
import locale_pl from "c:/some/project/i18n/json/pl.json";

I've manually hacked the function generateLoaderOptions in node_modules/@nuxtjs/i18n/dist/module.mjs to change the output to

import locale_hu from "../i18n/json/hu.json" assert { type: "json" };
import locale_i18n from "../i18n/json/i18n.json" assert { type: "json" };
import locale_pl from "../i18n/json/pl.json" assert { type: "json" };

and nuxt loads just fine, with i18n working.

I had to add the assert part because without it theres another issue:

[nuxt] [request error] [unhandled] [500] Module "file:///c:/some/project/i18n/json/hu.json" needs an import assertion of type "json"

So, why not use relative paths? Also the function to generate import, genImport, from dependency knitwork, doesn't know how to handle import with assert { type: "json" } so that might need some replacing too.

[Phundrak]

I had to add the assert part because without it theres another issue:

[nuxt] [request error] [unhandled] [500] Module "file:///c:/some/project/i18n/json/hu.json" needs an import assertion of type "json"

I am very unfamiliar with Windows (haven’t touched it in years), so I might say something stupid, but shouldn’t the path begin with file://c:/ instead of file:///c:/?

[mnlj]

I am very unfamiliar with Windows (haven’t touched it in years), so I might say something stupid, but shouldn’t the path begin with file://c:/ instead of file:///c:/?

This has nothing to do with Windows, RFC 1738 defines file url as file://<host>/<path>, and since that is on localhost, it becomes file:///. Also this is very offtopic to anything in this issue.

[kazupon]

I've just released @nuxtjs/[email protected] edge version I believe this issue is fixed. you can try to use it.

[MrSociety404]

The absolute path issue seems to work but I have now an new issue with the assert type

Module "file:///d:/nuxt3/locales/en-US.json" needs an import assertion of type "json"

[so1ve]

currently knitwork does not seem to support generating type assertions :-(

[kazupon]

I'll push the PR that is supported import assertions on knitwork