Nuxt module @nuxjs/ionic breaks Nuxt v4.1.1

[Zadigo]

🐛 The bug

I am trying to build a new project with Nuxt v4.1.1 and @nuxtjs/ionic and the Nuxt module which is required to setup Ionic raises this error:

[20:31:00] ERROR 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 'd:'

 at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:183:11)
 at defaultLoad (node:internal/modules/esm/load:78:3)
 at nextLoad (node:internal/modules/esm/hooks:748:28)
 at Hooks.load (node:internal/modules/esm/hooks:385:26)
 at handleMessage (node:internal/modules/esm/worker:201:24)
 at checkForMessages (node:internal/modules/esm/worker:143:28)
 at process.<anonymous> (node:internal/modules/esm/worker:162:5)
 at process.emit (node:events:508:28)



[20:31:00] ERROR 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 'd:'

🛠️ To reproduce

https://stackblitz.com/github/nuxt-modules/ionic/tree/main/playground

🌈 Expected behaviour

I expected Nuxt to launch normally with pnpm run dev

ℹ️ Additional context

• Windows Machine
• Nuxt v4.1.1
• @nuxtjs/ionic v1.0.0

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
 compatibilityDate: '2025-07-15',
 devtools: { enabled: true },
 ssr: false,

 modules: [
 '@nuxt/eslint',
 '@nuxt/image',
 '@nuxt/scripts',
 '@nuxt/test-utils',
 '@nuxt/ui',
 '@vueuse/nuxt',
 '@pinia/nuxt',
 '@nuxtjs/ionic'
 ]
})

[BobbieGoede]

What node version are you using? If you are using node 22.17.1 or lower could you check if you're still running into this issue after updating to a later release?

[mehdirayan]

hi
I continue to work on my project like this.
I rename "capacitor.config.ts" to"capacitor.confi.ts" and then i build "npm run build"
after that i rename again "capacitor.confi.ts" to the right name.
and finally "npx cap sync"

os: windows10
node : 24.8.0

[FabianClemenz]

i had i think the same issue - Updating to Node 22.19.0 (as you requested @BobbieGoede worked for me)

nuxt - 4.1.2
nuxtjs/ionic - 1.0.1
node - 22.12.0 on MacOS

when trying to build/generate or even installing packages i get

 ERROR Unknown file extension ".ts" for <path>/capacitor.config.ts 07:15:52

 at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
 at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
 at defaultLoad (node:internal/modules/esm/load:122:22)
 at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:483:32)
 at async ModuleJob._link (node:internal/modules/esm/module_job:115:19) 



 ERROR Unknown file extension ".ts" for <path>/capacitor.config.ts 07:15:52

error Command failed with exit code 1.

Changing to capacitor.config.js works fine, but this should not be needed

[BobbieGoede]

@FabianClemenz
Do I understand correctly that you're not experiencing this issue after updating to latest node v22?

@Zadigo
Can you check if you are still experiencing this issue after updating node?

@mehdirayan
Are you actually running into the described issue without your workaround? (could it be a leftover from before you updated node?)

If updating node does not resolve the issue then it may only be replicable using Windows, as updating seems to resolve this issue for those on MacOS so far, needs more investigating.

[FabianClemenz]

@BobbieGoede yes correct

[mehdirayan]

@BobbieGoede Yes still have the issue.
The first time i had it, i've tried to delete node-module and make a new install without any result.
I made a new clean project and copied the source code. This also didn't help
I upgrade node to latest. Same issue

[DMOShareIT]

Hi there, I am using Node 22.14.0, Nuxt 3.19.x (currently 3.19.2), with nuxtjs/ionic 1.0.0 I do not have any problem, as soon I update to 1.0.1 this ESM Loader bugs rises.

[atheless]

I also updated nuxt to 4.1.2 and @nuxt/ionic to 1.0.1 from nuxt 4.0.2 and "@nuxtjs/ionic": "1.0.0", , and now I’m getting an error related to capacitor.config.ts when starting the dev server.

Nuxt 4.1.2 with Nitro 2.12.6 
 ➜ Local: http://localhost:3000/
 ➜ Network: use --host to expose

 ERROR Cannot start nuxt: Unknown file extension ".ts" for file:///.../capacitor.config.ts 2:45:51 PM

 at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:189:9)
 at defaultGetFormat (node:internal/modules/esm/get_format:232:36)
 at defaultLoad (node:internal/modules/esm/load:145:22)
 at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:477:45)
 at async ModuleJob._link (node:internal/modules/esm/module_job:110:19)

Renaming capacitor.config.ts to capacitor.config.js is not the right fix and doesn’t solve the problem. According to the Capacitor documentation, Capacitor only recognizes .ts and .json config files.
If you rename it to .js, npx cap copy will fail during deployment because it can’t find a valid configuration file pointing to the dist directory.

Example output:

$ npx nuxi generate && npx cap copy
✔ You can preview this build using node .output/server/index.mjs
✖ copy android - failed!
[error] Could not find the web assets directory: ./www.
 Please create it and make sure it has an index.html file. You can change the path of this directory in
 capacitor.config.js (webDir option). You may need to compile the web assets for your app (typically npm run build).
 More info: https://capacitorjs.com/docs/basics/workflow#sync-your-project

The temporary workaround is to convert capacitor.config.ts to a JSON file (capacitor.config.json).

{
...
 "webDir": "dist",
...
}

With that change, npx cap copy works, but running the dev server fails:

$ npm run dev
 ERROR Cannot start Nuxt:
 Module "file:///.../capacitor.config.json" needs an import attribute of type "json"

 at validateAttributes (node:internal/modules/esm/assert:89:15)
 at defaultLoad (node:internal/modules/esm/load:155:3)
 at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:477:45)
 at async ModuleJob._link (node:internal/modules/esm/module_job:110:19)

So you have to convert back to something other than .ts, .json, just to make that error disappear.

Somehow downgrading back to nuxt 4.0.2 and "@nuxtjs/ionic": "1.0.0" does seem to solve the issues... 😕

[mehdirayan]

Hi
i think the original problem of ESM loader is related to the path, it refuse paths that begins with D:// (so it's windows specific).
The second problem is related to typescript.
Have you tried to install typescript ?

[atheless]

The second problem is related to typescript. Have you tried to install typescript ?

Installing TypeScript (npm install --save-dev typescript) alone does not solve runtime .ts imports. 😕

Judging from the error, Node does not know how to handle .ts files as ESM modules.

What I tried as workaround was updating the dev script in package.json to use ts-node as a loader:

"scripts": {
 ...
 "dev": "node --loader ts-node/esm node_modules/.bin/nuxt dev",
 ...
}

Then running: npm run dev

This successfully starts the Nuxt 4.1.2 dev server with capacitor.config.ts , but it produces a runtime warning during server runtime:

(node:3227985) ExperimentalWarning: --experimental-loader may be removed in the future; instead use register(): 
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("ts-node/esm", pathToFileURL("./"));'

For example:

node:3231010) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("ts-node/esm", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
Nuxt 4.1.2 with Nitro 2.12.6 nuxi 6:33:28 PM
 6:33:28 PM
 ➜ Local: http://localhost:3000/
 ➜ Network: use --host to expose

PWA integration is has been removed from @nuxtjs/ionic. It is recommended to install and configure @vite-pwa/nuxt instead following the instructions in https://vite-pwa-org.netlify.app/frameworks/nuxt.html. 6:33:31 PM
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 6:33:31 PM
ℹ Nuxt Icon server bundle mode is set to local 6:33:32 PM
Current Environment: development 6:33:32 PM
 ✔ Running in development mode. 6:33:32 PM
 🚀 Deploy target: web 6:33:32 PM
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 6:33:32 PM
✔ Vite client built in 57ms 6:33:33 PM
✔ Vite server built in 494ms 6:33:34 PM
(node:3231010) ExperimentalWarning: --experimental-loader may be removed in the future; instead use register(): 6:33:34 PM
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("ts-node/esm", pathToFileURL("./"));'
(Use node --trace-warnings ... to show where the warning was created)

It’s still another a hacky workaround and doesn’t solve the deployment problem with npx cap copy I didn’t have this issue before updating Nuxt and Ionic to newer versions