What does "Module has been externalized" actually mean?

[ZweiEuro]

I maintain a small module for a much larger project, i can't run tests with it with vite due to this kind of error:

Error: Module "npm:@wui/web-user-interface-node/TestMock" has been externalized for browser compatibility. Cannot access "npm:@wui/web-user-interface-node/TestMock.TestMock" in client code.  See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

Following the link, it just says to tell the maintainer. Well, since I am the maintainer I have no idea what to do next. I checked if my package.json or code has any significant differences to other libraries that can be importet just fine like jsdom or @testing-library/jest-dom/matchers but I don't see any significant difference. I've also tried all kinds of changes to package.json but the error persists. Even when I delete all the contents of the file in question, the error still persits, so I started assuming I am looking into the wrong direction.

Reverse engineering where the problem is caused leads nowhere as string searching the error brings no results.

What exact config problem is vitest upset with, here ? What does it expect vs what I am giving it that makes it think my library need polyfill? I am not using anything from the global space other than globalThis.window in order to link something back for custom hooks and other functionality, but that should be fine if i use react testing tools that allow that kind of behavior.

My best guess is that my tsconfig does something illegal that is unexpected by vitest, but without information on what it does incorrectly that is impossible to tell...

https://gitlab.zweieuro.at/wui/core/web-user-interface-node/-/tree/development is the library i wrote and am trying to make work.

Sidenote: I am using deno, but that only changes the imports to have a prefix.

TLDR:
What causes this error?
https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility

I've originally asked this question: vitest-dev/vitest#7617 but since apparently its a vite problem not a vitest problem i am reasking it here

---

Apparently when I try to do it with a blank react-ts vite project it works as expected, which makes me wonder what the difference is between the two versions. Maybe the TSconfig file of the template does something that deno settings don't do normally.
I know this sounds like "just ask the guys at deno" but its a vite error and if i don't know whats causing it i can't search for it with deno either.
I found the error comes ... i think? from here:

vite/packages/vite/src/node/plugins/resolve.ts

Line 484 in c9e086d

throw new Error(\`Module "${id}" has been externalized for browser compatibility. Cannot access "${id}.\${key}" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.\`)

or here:

vite/packages/vite/src/node/optimizer/esbuildDepPlugin.ts

Line 273 in c9e086d

console.warn(\`Module "${path}" has been externalized for browser compatibility. Cannot access "${path}.\${key}" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.\`)

but sadly to me this doesn't mean anything to me, no idea how this code is eventually parsed and/or executed

[rschristian]

Are you importing with npm:@wui/web-user-interface-node/TestMock as the specifier? Your package.json does not provide an export called TestMock, it will not be available hence why you're seeing errors.

It'd also help if your module was public, it seems to be private (or under a different name) as this 404's.

[rschristian]

Its finding useage of node build ins

This is exactly what I am asking about and want to know!

Turns out this was slightly incorrect, it also includes the browser field spec's "<module>": false, see docs.

Looking at the code, I'm fairly certain this can also pop up from bad path construction, i.e., Vite can't find the module you're referring to. Double check all your paths are correct.

Is there a way to make vite tell me what package it found ?

In some cases, but evidently not in the code paths you're hitting.

It blocks people from helping you ...

Yeah, but i have more control of it including build pipelines etc which i only know how to do on gitlab CI and have 0 experience with on github.

You've misunderstood -- I'm not asking for it to be developed on GitHub, but that the built package contents be made public. Your module 404s on NPM so it's either published under a different name or is private. Maintainers really need the built code, if they can't see what you're actually running help is going to be limited.

[ZweiEuro]

What confuses me so much is that it works perfectly fine in the react-ts template for vitejs, but doesn't work in this configuration. So i really don't think its because of my library

Repo that "just works"
https://github.com/ZweiEuro/vitest_react_wui/

[ZweiEuro]

I've brought my package to jsr https://jsr.io/@wui/web-user-interface-lib#install so its way easier to install.
Interestingly my problem now went away but i got the same one with npm:@testing-library/react

[ZweiEuro]

OKAY!
I got it working apparently by removing the deno-specific npm: in front of @testing-library.
I have no earthly clue WHY but at least it stops complaining now