QUnit transpilation issue when using targets that include IE11

[NullVoxPopuli]

Reproduction: NullVoxPopuli/limber#9
Command ran: npm run test:ember (ember test)
Error

not ok 1 Chrome 89.0 - [undefined ms] - Global error: Uncaught Error: an unsupported module was defined, expected `define(id, deps, module)` instead got: `1` arguments to define` at http://localhost:7357/assets/vendor.js, line 67
    ---
        browser log: |
            {"type":"error","text":"Uncaught Error: an unsupported module was defined, expected `define(id, deps, module)` instead got: `1` arguments to define` at http://localhost:7357/assets/vendor.js, line 67\n","testContext":{}}

Logs
https://github.com/NullVoxPopuli/limber/pull/9/checks?check_run_id=2175531805

[rwjblue]

The issue here is due to QUnit being babel'ed in CI in a way that forces a different transpilation (due to the inclusion of IE11 in the targets when running in CI). QUnit doesn't actually need to be babel'ed at all, and if you add it to skipBabel you can avoid this specific error.

The ember new blueprint (when using the --embroider flag) sets this up for you:

https://github.com/ember-cli/ember-cli/blob/4f3b31a61e18c2731ed536e7de8462dd908352f0/blueprints/app/files/ember-cli-build.js#L25-L29

return require('@embroider/compat').compatBuild(app, Webpack, {
    skipBabel: [
      {
        package: 'qunit',
      },
    ],
});

[NullVoxPopuli]

That worked! However, it now looks like #730 is affecting tests 🤔

Thanks for the progress! <3

[ef4]

The full explanation for what's happening here is:

• qunit is already transpiled by babel
• that transpilation inlined babel's typeof, because older browsers native typeof will do the wrong thing for polyfilled native classes
• if you build your ember app for ie11, our babel also sees a typeof (the one inside the babel helper itself) and decides to polyfill it to be safe
• rather than bloat your build, we try to import the polyfill from @babel/runtime
• when webpack encounters qunit.js, it sees that it has that added import statement and sends it down a different code path than it would otherwise get. That code path also tries to support define.amd, and causes qunit to try to register itself with Ember's loader in a broken way.

skipBabel exists to solve this kind of problem. It would be much better if qunit would publish their ES modules instead, untranspiled. I have experimented with this and it's relatively easy to do with a small refactor to qunit. But that would also cause churn for us, because the way ember apps consume qunit is incorrect, relative to how it's actually authored. It has no named exports for test, module, etc. It has only a default export of the whole QUnit object.