Adding the plugin to a Vite project with AdonisJS and Inertia cause an error

[kamilcglr]

Environment

• Operating System: Darwin
• Node Version: v22.11.0
• Nuxt Version: -
• CLI Version: 3.15.0
• Nitro Version: -
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Version

Commit 845f85a

Reproduction

After creating a fresh AdonisJS project with the Inertia and Vue 3 starter kit

# Vue without server-side rendering
npm init adonisjs@latest -- -K=inertia --adapter=vue --no-ssr

Here is the procedure followed to add NuxtUI to the project https://ui3.nuxt.dev/getting-started/installation/vue

1. Install the package with the latest commit, as the release has not yet been made

npm install https://pkg.pr.new/@nuxt/ui@5a9511f

2. Add the Nuxt UI Vite plugin in the vite.config.ts

import ui from '@nuxt/ui/vite'
import { defineConfig } from 'vite'
import { getDirname } from '@adonisjs/core/helpers'
import inertia from '@adonisjs/inertia/client'
import vue from '@vitejs/plugin-vue'
import adonisjs from '@adonisjs/vite/client'

export default defineConfig({
  plugins: [
    inertia({ ssr: { enabled: false } }),
    vue(),
    adonisjs({ entrypoints: ['inertia/app/app.ts'], reload: ['resources/views/**/*.edge'] }),
    ui(),
  ],

  resolve: {
    alias: {
      '~/': `${getDirname(import.meta.url)}/inertia/`,
    },
  },
})

Here I already have a problem: I can't launch the application.

failed to load config from /Users/kamil/Documents/projects/myproject/vite.config.ts
TypeError: The URL must be of scheme file

There is no problem with the use of the library with a Vite et Vue project alone.

It seems to be a problem with Vite or AdonisJS, but the error is not very explicit. I tried with Node 18, 20 and 22.

Here is the Replit to reproduce
https://replit.com/@kamilcaglarcont/Adonis-x-Inertia-x-Vue-3-x-Nuxt-UI?v=1

Description

Hi, a few days weeks ago, the Nuxt UI 3 team made the component library compatible with standalone Vue projects. Thank you for your work on this library 👏 !

I'd like to use it with AdonisJS and Inertia.

AdonisJS is a TypeScript-first web framework for building web apps and API servers. It is possible to use it with Inertia to build single-page apps with VueJS.

However, I've never managed to use them together, despite several hours of debugging. I have an error that seems to be related to Vite.

Additional context

I tried with node 18, 20 and 22.

Logs

[ info ] starting HTTP server...
Debugger attached.
failed to load config from /Users/kamil/Documents/projects/myproject/vite.config.ts

   TypeError: The URL must be of scheme file

No more logs even with DEBUG=vite:*

[thansil-emst]

I created a pure Vue project with the new Nuxt/ui alpha version released today https://github.com/nuxt/ui/releases/tag/v3.0.0-alpha.8 ,and encountered the same issue there. " TypeError: The URL must be of scheme file" It doesn't belong to AdonisJS;

[UnluckyNinja]

On windows it will log stack trace.
And a fresh vite vue-ts project with only [email protected] installed will throw this error.

Reprod: https://stackblitz.com/edit/vitejs-vite-o3b1xm (and on stackblitz it has a different error, not sure if it's related)

The error log: (Win10, node v20.16.0 )

> [email protected] dev D:\Code\Issues\nuxt-ui-issue
> vite

failed to load config from D:\Code\Issues\nuxt-ui-issue\vite.config.ts
error when starting dev server:
TypeError [ERR_INVALID_URL_SCHEME]: The URL must be of scheme file
    at fileURLToPath (node:internal/url:1463:11)
    at fileURLToPath (file:///D:/Code/Issues/nuxt-ui-issue/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:1971:25)
    at pathToFileURL (file:///D:/Code/Issues/nuxt-ui-issue/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:1974:26)
    at _resolve (file:///D:/Code/Issues/nuxt-ui-issue/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2108:10)
    at resolveSync (file:///D:/Code/Issues/nuxt-ui-issue/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2111:10)
    at resolvePathSync (file:///D:/Code/Issues/nuxt-ui-issue/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2121:24)
    at NuxtEnvironmentPlugin (file:///D:/Code/Issues/nuxt-ui-issue/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_oszrptiaxabnycx7kgcp5nbomu/node_modules/@nuxt/ui/dist/unplugin.mjs:137:20)
    at file:///D:/Code/Issues/nuxt-ui-issue/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_oszrptiaxabnycx7kgcp5nbomu/node_modules/@nuxt/ui/dist/unplugin.mjs:171:5
    at file:///D:/Code/Issues/nuxt-ui-issue/node_modules/.pnpm/[email protected]/node_modules/unplugin/dist/index.mjs:1793:32
    at file:///D:/Code/Issues/nuxt-ui-issue/vite.config.ts.timestamp-1731421177948-955f0a600f524.mjs:8:5
 ELIFECYCLE  Command failed with exit code 1.

[ivanmaxlogiudice]

@kamilcglr, @UnluckyNinja can u check if it works with this #2899?

npm i https://pkg.pr.new/@nuxt/ui@2899

[UnluckyNinja]

@kamilcglr, @UnluckyNinja can u check if it works with this #2899?

npm i https://pkg.pr.new/@nuxt/ui@2899

Yes, it works for dev mode now. But when I tried to build it, it outputs a lot of type-checking errors emitted from the installed dep folder of this pr. (~260 errors, and most of them are almost identical so I picked only part of it)

node_modules/.pnpm/@nuxt+ui@https+++pkg.pr.new+@nuxt+ui@2899_@[email protected][email protected]_radix-vue_4lbplemevlbktr25mrjxlvxfwu/node_modules/@nuxt/ui/dist/runtime/components/DropdownMenuContent.vue:35:30 - error TS2307: Cannot find module '#imports' or its corresponding type declarations.

35 import { useAppConfig } from '#imports'
                                ~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@https+++pkg.pr.new+@nuxt+ui@2899_@[email protected][email protected]_radix-vue_4lbplemevlbktr25mrjxlvxfwu/node_modules/@nuxt/ui/dist/runtime/components/Form.vue:4:24 - error TS2307: Cannot find module '#build/app.config' or its corresponding type declarations.

4 import _appConfig from '#build/app.config'
                         ~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@https+++pkg.pr.new+@nuxt+ui@2899_@[email protected][email protected]_radix-vue_4lbplemevlbktr25mrjxlvxfwu/node_modules/@nuxt/ui/dist/runtime/components/Form.vue:166:41 - error TS2304: Cannot find name 'Event'.

166 async function onSubmitWrapper(payload: Event) {
                                            ~~~~~

The path error is indeed gone, thank you.

[benjamincanac]

@UnluckyNinja This is related to another issue: #2560. Can you remove vue-tsc from your build command for now to try it out?

[UnluckyNinja]

@UnluckyNinja This is related to another issue: #2560. Can you remove vue-tsc from your build command for now to try it out?

Just tried and it is successfully built (using the reprod in my local environment).
I also checked the output with vite serve and the page is displayed normally.

[cbalmefrezol]

houra !