v4.0.0-beta.4: Regression from v4.0.0-beta.3: ERR_UNSUPPORTED_DIR_IMPORT Directory import '\node_modules\primevue\api' is not supported resolving ES modules when using vitest

[sceee]

Describe the bug

After upgrading from v4.0.0-beta.3 to v4.0.0-beta.4, the following error occurs when executing tests using vitest that worked previously in v4.0.0-beta.3:

Directory import '\node_modules\primevue\api' is not supported resolving ES modules imported from \node_modules\primevue\config\config.mjs Did you mean to import primevue/api/api.mjs?

It seems the issue results from this import of primevue/api here as this is a directory import:

primevue/components/lib/config/PrimeVue.js

Line 1 in 401dd22

import { FilterMatchMode } from 'primevue/api';

In the build, this directory \node_modules\primevue\api contains a package.json with the following content (changed in 1d3096d and a438dba ):

{
    "main": "./api.mjs",
    "module": "./api.mjs",
    "types": "./Api.d.ts"
}

This seems to cause issues as the ESM loader used by vitest does not support this.

I was guessing a potential fix could be to properly declare a proper export map instead here so ESM loaders can pick up the correct file. Something like:

{
    "exports": {
        ".": {
          "types": "./Api.d.ts",
          "import": "./api.mjs",
          "require": "./api.cjs.js"
        }
    }
}

(Side note: In this directory there is also a api.esm.js which seems to be identical to the api.mjs except for the sourcemap comment.)

However, I could not get it running by simply changing the package.json in the \node_modules\primevue\api directory.

Unfortunately, this issue makes primevue v4.0.0-beta.4 impossible to be tested using vitest, therefore blocks the update in my case.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template-ctejwg?file=package.json

PrimeVue version

4.0.0-beta.4

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

node / vitest

Steps to reproduce the behavior

1. Open the attached stackblitz
2. Potentially stop the execution using Ctrl+C in the terminal
3. Run npm test in the terminal to "execute" the test

This shows the error.

Expected behavior

Primevue components can be tested using vitest as it used to work until primevue v4.0.0-beta.3.
No error during tests.

[sceee]

Ok, I found a workaround by adding the following to the vite.config.ts:

test: {
    ...,
    server: {
      deps: {
        inline: ['primevue'],
      },
    },
  },

According to the vitest docs, this could be helpful to handle packages that ship .js in ESM format (that Node can't handle).

However, I don't think it is intended that the code is shipped in such a way and therefore such an option is required to use primevue in tests especially since this was working in v4.0.0-beta.3 without that option.

So I would appreciate a proper solution in primevue 😃 .

[cmcnicholas]

I get a similar issue importing primevue/toast (working beta3, failing beta4 in vitest)

Error: Directory import 'xxx\node_modules\primevue\portal' is not supported resolving ES modules imported from xxx\node_modules\primevue\toast\toast.mjs Did you mean to import primevue/portal/portal.mjs?

[sceee]

This seems to be resolved by the latest bundle changes in 4.0.0-rc.1.