ES module import fails with v1.5.0 (but works up to v1.4.0)

[NiasSt90]

Describe the bug

$ yarn run vitest --run --reporter basic --environment jsdom src/App.test.tsx
yarn run v1.22.21
warning ../../package.json: No license field
$ /home/user/projekte/bvo-portal-ui/node_modules/.bin/vitest --run --reporter basic --environment jsdom src/App.test.tsx

RUN v1.5.0 /home/user/projekte/bvo-portal-ui

❯ src/App.test.tsx (0 test)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

FAIL src/App.test.tsx [ src/App.test.tsx ]
Error: Directory import '/home/user/projekte/bvo-portal-ui/node_modules/@mui/x-date-pickers/AdapterDateFns' is not >supported resolving ES modules imported from /home/user/projekte/bvo-portal-ui/node_modules/@intentus/bvo->theme-react/dist/esm/index.js
Did you mean to import @mui/x-date-pickers/node/AdapterDateFns/index.js?
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯>⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯>⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { url: 'file:///home/user/projekte/bvo-portal-ui/node_modules/@mui/x-date-pickers/AdapterDateFns', >code: 'ERR_UNSUPPORTED_DIR_IMPORT' }
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯>⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯>⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

@mui/x-date-pickers is a peerDependency from @intentus/bvo-theme-react (a bundled ESM library).

Until vitest=v1.4.0 everything worked fine.
With v1.5.0 it crashes every time a test (or the production code from this test) uses an import of the @intentus/bvo-theme-react library.

Reproduction

Currently i don't know how to create an reproducer.

The (esm) module @intentus/bvo-theme-react is not public available.

System Info

Debian/Bookworm 

$ node --version
v20.5.1

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[github-actions]

Hello @NiasSt90. Please provide a minimal reproduction using a GitHub repository or StackBlitz (you can also use examples). Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[FranciscoKloganB]

Facing a similar issue with react/testing-library. Going back to v1.4.0 solves it for me. However, I have no clue why this would happen.

SyntaxError: '*[role~="heading"],h1,h2,h3,h4,h5,h6' is not a valid selector
 ❯ emit node_modules/.pnpm/nwsapi@2.2.8/node_modules/nwsapi/src/nwsapi.js:557:17
 ❯ Object._querySelectorAll [as select] node_modules/.pnpm/nwsapi@2.2.8/node_modules/nwsapi/src/nwsapi.js:1501:9
 ❯ HTMLDivElementImpl.querySelectorAll node_modules/.pnpm/jsdom@22.1.0/node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:78:26
 ❯ HTMLDivElement.querySelectorAll node_modules/.pnpm/jsdom@22.1.0/node_modules/jsdom/lib/jsdom/living/generated/Element.js:1119:58
 ❯ queryAllByRole node_modules/.pnpm/@testing-library+dom@9.3.4/node_modules/@testing-library/dom/dist/queries/role.js:121:31
 ❯ node_modules/.pnpm/@testing-library+dom@9.3.4/node_modules/@testing-library/dom/dist/query-helpers.js:74:17
 ❯ node_modules/.pnpm/@testing-library+dom@9.3.4/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ node_modules/.pnpm/@testing-library+dom@9.3.4/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 ❯ src/pages/accounts/verify/AccountVerifyPage.spec.tsx:303:43
    301|         expect(dialog).toBeVisible()
    302| 
    303|         const alertTitle = within(dialog).getByRole('heading', {
       |                                           ^
    304|           name: /translated_error/i,
    305|         })

[qraynaud]

Same here. Cannot make a repro for the moment. But 1.5.0 is also broken on my side. Seems like in some circumstances (I’ve not pinned them down right now) there is a confusion between CJS an ESM on some files. That’s very weird.

[hi-ogawa]

This could be relevant if your dependency uses a path like dist/esm/index.js.

• When upgrading from 1.4.0 to 1.5.0, an error related to CommonJS modules appears. #5555 (comment)

I see it as a packaging issue since NodeJs cannot probably import such deps either. So, the workaround is to use server.deps.inline as suggested in the comment above.

[qraynaud]

I don’t think this is it. I can import the dep using standard node:

node << EOF
(async() => console.log(await import("module")))()
EOF

do work. I'm usually loading it using node --import tsx/esm instead because said module can load dynamic files and some of them in the project are mts files. But if I only load mjs and js files, everything works as standard node ESM modules.

[qraynaud]

But the problem could be related to the provided patch though. I do have both "type": "module" and esm/ in my path. So before the patch, my codebase returned false in isValidNodeImport() and now it returns true. But it seems it is breaking things to do so later on.

I observe 2 breakings on the same type of modules :
1/ as said, one module do dynamic imports of .mts files and I get unknown extension when importing those files when it was working properly before
2/ another module using the same structure imports amqplib and I have vi.mock("amqplib") in all my tests. On 1.4.0, the lib was properly mocked in this dep, now it is not anymore and my tests are all failing

What I think it means is that the codebase for valid node imports is somehow broken. It was not visible before because it was hidden by the fact it was not used in those cases.

[NiasSt90]

This could be relevant if your dependency uses a path like dist/esm/index.js.

• When upgrading from 1.4.0 to 1.5.0, an error related to CommonJS modules appears. #5555 (comment)

I see it as a packaging issue since NodeJs cannot probably import such deps either. So, the workaround is to use server.deps.inline as suggested in the comment above.

thanks, that looks exactly like the cause of my problem.
And the suggested workaround
server: { deps: { inline:["@intentus/bvo-theme-react"] }, },
in my vite.config.ts works.

Now i'm trying to understand what is wrong with our library ;)