ESM packages without a "main" field is not detected/loaded correctly

[Wangijun]

What happened?

When integrating into Quasar using the Vite plugin according to Tailwind CSS v4,

build: {
  vitePlugins: [
    // both are perfectly equivalent:
    [ '<plugin-name>', { /* plugin options */ } ],
    [ '<plugin-name>', { /* plugin options */ }, { server: true, client: true } ]
  ]
}

The use ofsyntax does not work. Now I am using an import method, and the ugly looking code is what makes the Tailwind CSS v4 Vite plugin work, as shown below

import tailwindcss from '@tailwindcss/vite'

vitePlugins: [
        // ['@tailwindcss/vite', {}],
        // tailwindcss  here !!!
        [tailwindcss as unknown as string, {}],
      ],

What did you expect to happen?

I believe that regardless of which grammar is used, it should work properly

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-hbcyrpyp?file=quasar.config.js

How to reproduce?

Follow the Tailwind CSS Vite integration documentation and configure it using Quasar's Vite plugin configuration method, and it will appear

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Chrome

Quasar info output

Relevant log output

Additional context

No response

[yusufkandemir]

We use require.resolve to resolve package paths, which we use to detect the presence of a package, or to load and use that package:
https://github.com/quasarframework/quasar/blob/dev/app-vite/lib/utils/get-package-path.js

But, const require = createRequire(import.meta.url) acts for CJS. So, if an ESM-only package only defines exports and not main, require.resolve will fail with [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in .... This is the case with TailwindCSS, as can be seen in tailwindlabs/tailwindcss#13216, tailwindlabs/tailwindcss#16751, etc.

import.meta.resolve is a release candidate in Node v18, v20, and v22. It does not require --experimental-import-meta-resolve anymore. However, that flag enables a second parameter called parent, which is basically the equivalent of { paths: [ parent ] } for require.resolve, which we were utilizing.
https://nodejs.org/docs/latest-v18.x/api/esm.html#importmetaresolvespecifier

As another alternative, we could handle errors from require.resolve and then fall back to import.meta.resolve or some other method, if we can't simply replace it altogether.

Yet another alternative, which will probably be the best solution:

• use https://github.com/wooorm/import-meta-resolve
• or use https://github.com/unjs/mlly which uses it and provides more ESM utilities

@rstoenescu I hope this information is enough to decide on which action to take.

[rstoenescu]

Yes, I've been keeping an eye on the native Node.js import.meta.resolve for some time now.
Unfortunately, the flag is required if it's to be used with a second param (which we absolutely need), no matter the current Node.js versions (18 to even 23):

[rstoenescu]

Fix will be available in q/app-vite v2.1.4