Unable to use with Vite in non-ember projects

[sukima]

I discovered a bug when following the instructions to install qunit-dom. I seems to expect Vite to include Broccollii with the bundled for browser output. I think this might have to do with the package.json not providing a main and the default index.js is an ember-cli addon module.

The basic premise was I had qunit working and I added qunit-dom like this:

1. Add qunit-dom to package.json devDependencies
2. Add import ‘qunit-dom’; to my test start up module (after first import of qunit)
3. Run vite (dev server)
4. Load page in browser

The console produces the following error:

Uncaught ReferenceError: process is not defined
    at node_modules/quick-temp/node_modules/rimraf/rimraf.js (rimraf.js:23)
    at __require2 (chunk-OROXOI2D.js?v=1ddafd9e:16)
    at node_modules/quick-temp/index.js (index.js:4)
    at __require2 (chunk-OROXOI2D.js?v=1ddafd9e:16)
    at node_modules/broccoli-plugin/dist/read_compat.js (read_compat.ts:4)
    at __require2 (chunk-OROXOI2D.js?v=1ddafd9e:16)
    at node_modules/broccoli-plugin/dist/index.js (index.ts:11)
    at __require2 (chunk-OROXOI2D.js?v=1ddafd9e:16)
    at node_modules/broccoli-funnel/index.js (index.js:6)
    at __require2 (chunk-OROXOI2D.js?v=1ddafd9e:16)

Steps to reproduce

1. Clone https://github.com/sukima/lit-app-starter-kit
2. Install packages bun i, npm i, pnpm i your preference I chose Bun
3. run the dev script bun run dev
4. Open in browser http://localhost:3000/tests/

This is the problematic commit: https://github.com/sukima/lit-app-starter-kit/commit/42220f7d7ab878a73a5dd4c9d3251262f529aae9

You can verify it is qunit-dom by git checkout HEAD^ and running the steps above.

[NullVoxPopuli]

I think defining an exports key should also help resolve, which we'd probably want to align with modern package.jsons (provided it includes default and types)

Additionally, we can specify for v1 addons to not use index.js via specifying ember-addon-main in ember-addon

[NullVoxPopuli]

Ah, here is how: https://github.com/embroider-build/embroider/blob/17cf74c90573a22648807786d20360a5715ae038/packages/macros/package.json#L67

[sukima]

Yes, this I think is what prevents me from incorporating qunit-dom into every project I touch.

[NullVoxPopuli]

https://github.com/mainmatter/qunit-dom/pull/2028 is now merged, so we're only waiting for release now

[NullVoxPopuli]

@sukima v 3.0.0-rc.1 should be installable and compatible with Vite :muscle:

[sukima]

Wowzers!

pnpm add [email protected]
Packages: +1 -294
+------------------------------------------------------------------------------------------------------------------------------------------
Progress: resolved 61, reused 39, downloaded 1, added 1, done

dependencies:
- qunit-dom 2.0.0
+ qunit-dom 3.0.0-rc.2

Done in 3.8s

[sukima]

Confirmed, it works

[NullVoxPopuli]

I'm now using the rc.2 release on https://limber.glimdown.com and https://tutorial.glimdown.com https://github.com/NullVoxPopuli/limber/blob/main/apps/repl/package.json#L123

:tada:

To get the types resolved, I did need to change my tsconfig to extend from @tsconfig/ember, which, in reality needed:

"moduleResolution": "bundler",

So, I think for qunit-dom sanity, I'm going to PR some test projects that focus on the bare minimum to prove this stays working over time.

[sukima]

Ran into an issue where the tsserver was unable to see the qunit-dom module. Do you have any advise @NullVoxPopuli ?

https://github.com/sukima/lit-app-starter-kit/tree/qunit-dom

[sukima]

qunit-dom is still very var GLOBAL. I’m curious why it feels the need for that now that modules are kind of the default for everything these days. Especially with UMD being several years in common use. Is that why things are so difficult?

[NullVoxPopuli]

Do you have moduleResolution set to bundler?

I'm about to make some types test packages that show minimum required ts config

[NullVoxPopuli]

After this is merged and released: https://github.com/mainmatter/qunit-dom/pull/2065

compatibility with varying projects should be a bit more broad.