Using Embroider with `jquery-integration: true` optional feature fails

[drewlee]

The embroider-safe and embroider-optimized scenarios started failing for the ember-a11y-testing addon about 9 days ago. The addon itself didn't have any changes, so these seem to have started failing out of the blue. We're currently using @embroider/test-setup v0.39.1, but is also reproducible with v0.40.0.

ember try:one embroider-safe

WARNING: ember-destroyable-polyfill is not required for Ember 3.22.0-alpha.1 and later, please remove from your 'package.json'.
Successfully applied EMBROIDER_TEST_SETUP_OPTIONS=safe
Building
Environment: test
building... 
Building into /tmp/embroider/c20dfe/tests/dummy
The exported identifier "Error" is not declared in Babel's scope tracker
as a JavaScript value binding, and "@babel/plugin-transform-typescript"
never encountered it as a TypeScript type declaration.
It will be treated as a JavaScript value.

This problem is likely caused by another plugin injecting
"Error" without registering it in the scope tracker. If you are the author
 of that plugin, please use "scope.registerDeclaration(declarationPath)".
[BABEL] Note: The code generator has deoptimised the styling of /home/runner/work/ember-a11y-testing/ember-a11y-testing/node_modules/axe-core/axe.js as it exceeds the max of 500KB.
Hash: 642ac2d170a64e7753cb
Version: webpack 4.46.0
Child
    Hash: 642ac2d170a64e7753cb
    Time: 15533ms
    Built at: 05/11/2021 3:30:09 AM
                            Asset      Size                                  Chunks                                Chunk Names
    chunk.4970695954304d53adc8.js   6.3 KiB                         assets/dummy.js  [emitted] [immutable]         assets/dummy.js
    chunk.5cfc54f9c1184ebb4639.js  2.49 MiB  vendors~assets/dummy.js~assets/test.js  [emitted] [immutable]  [big]  vendors~assets/dummy.js~assets/test.js
    chunk.cd9c50f3bc7e7395611b.js  1.05 MiB                  vendors~assets/test.js  [emitted] [immutable]  [big]  vendors~assets/test.js
    chunk.eee0d346d969d0545462.js  99.1 KiB                          assets/test.js  [emitted] [immutable]         assets/test.js
    chunk.f85a6e20de06dd44c849.js   105 KiB          assets/dummy.js~assets/test.js  [emitted] [immutable]         assets/dummy.js~assets/test.js
    Entrypoint assets/dummy.js [big] = chunk.5cfc54f9c1184ebb4639.js chunk.f85a6e20de06dd44c849.js chunk.4970695954304d53adc8.js
    Entrypoint assets/test.js [big] = chunk.5cfc54f9c1184ebb4639.js chunk.cd9c50f3bc7e7395611b.js chunk.f85a6e20de06dd44c849.js chunk.eee0d346d969d0545462.js
    [../../node_modules/@ember/test-helpers/-internal/build-registry.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/-internal/build-registry.js 3.1 KiB {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/-internal/debug-info-helpers.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/-internal/debug-info-helpers.js 640 bytes {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/-internal/debug-info.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/-internal/debug-info.js 4.72 KiB {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/-internal/helper-hooks.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/-internal/helper-hooks.js 2.13 KiB {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/-internal/promise-polyfill.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/-internal/promise-polyfill.js 10.5 KiB {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/-tuple.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/-tuple.js 99 bytes {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/-utils.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/-utils.js 1.41 KiB {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/application.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/application.js 888 bytes {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/build-owner.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/build-owner.js 1.36 KiB {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/dom/-get-element.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/dom/-get-element.js 708 bytes {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/dom/-get-elements.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/dom/-get-elements.js 476 bytes {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/dom/-get-window-or-element.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/dom/-get-window-or-element.js 441 bytes {vendors~assets/test.js} [built]
    [../../node_modules/@ember/test-helpers/dom/-guard-for-maxlength.js] /tmp/embroider/c20dfe/node_modules/@ember/test-helpers/dom/-guard-for-maxlength.js 1.19 KiB {vendors~assets/test.js} [built]
    [./assets/dummy.js] 39.2 KiB {assets/dummy.js~assets/test.js} [built]
    [./assets/test.js] 10.4 KiB {assets/test.js} [built]
        + 358 hidden modules

    WARNING in /home/runner/work/ember-a11y-testing/ember-a11y-testing/node_modules/axe-core/axe.js
    Module not found: Error: Can't resolve 'crypto' in '/home/runner/work/ember-a11y-testing/ember-a11y-testing/node_modules/axe-core'
     @ /home/runner/work/ember-a11y-testing/ember-a11y-testing/node_modules/axe-core/axe.js
     @ /tmp/embroider/c20dfe/test-support/logger.js
     @ ./assets/test.js
cleaning up
cleaning up...
Built project successfully. Stored in "/tmp/tests-dist-2021411-2268-1bxih8u.xgbr".
not ok 1 Chrome 90.0 - [undefined ms] - Global error: Uncaught Error: Could not find module `ember` imported from `(require)` at http://localhost:7357/assets/vendor.js, line 256
    ---
        browser log: |
            {"type":"error","text":"Uncaught Error: Could not find module `ember` imported from `(require)` at http://localhost:7357/assets/vendor.js, line 256\n","testContext":{}}
    ...
not ok 2 Chrome 90.0 - [undefined ms] - Global error: Uncaught TypeError: Cannot read property 'deprecate' of undefined at webpack:////tmp/embroider/c20dfe/node_modules/ember-source/@ember/-internals/bootstrap/index.js?, line 21
    ---
        browser log: |
            {"type":"error","text":"Uncaught TypeError: Cannot read property 'deprecate' of undefined at webpack:////tmp/embroider/c20dfe/node_modules/ember-source/@ember/-internals/bootstrap/index.js?, line 21\n","testContext":{"state":"complete"}}
    ...
not ok 3 Chrome 90.0 - [undefined ms] - Global error: Uncaught Error: The tests file was not loaded. Make sure your tests index.html includes "assets/tests.js". at http://localhost:7357/232586110610/tests/index.html?hidepassed, line 131
    ---
        browser log: |
            {"type":"error","text":"Uncaught Error: The tests file was not loaded. Make sure your tests index.html includes \"assets/tests.js\". at http://localhost:7357/232586110610/tests/index.html?hidepassed, line 131\n","testContext":{"state":"complete"}}

[ef4]

Can you check if the problem was introduced by ember-cli-babel 7.26.5?

[drewlee]

@ef4 Negative. The addon is currently using ember-cli-babel v7.26.3.

[RobbieTheWagner]

@drewlee I know we needed to fix this in ember-cognito like this https://github.com/paulcwatts/ember-cognito/pull/161/files my guess is this is because crypto is no longer global?

[rwjblue]

I debugged this issue a bit with @scalvert today, and we figured out a bit more of what is going on.

The warning RE: crypto is a red-herring (axe-core only references require('crypto') in a try/catch + fallback looking for window.crypto) and can be resolved by adding:

return maybeEmbroider(app, {
  packageOptions: {
    webpackOptions: {
      node: {
        crypto: 'empty',
      },
    },
  },
});

The real issue is going to affect more folks than those using axe-core though. Basically, due to @ember/test-helpers desire to hook into jQuery's ajaxSend and ajaxComplete and setup test waiters for you when a global jQuery is present, it checks for window.Ember and falls back to require('ember'):

https://github.com/emberjs/ember-test-helpers/blob/master/vendor/monkey-patches.js

When running Ember 3.27+, the ember module itself doesn't exist at that point which causes the error reported above:

not ok 1 Chrome 90.0 - [undefined ms] - Global error: Uncaught Error: Could not find module `ember` imported from `(require)` at http://localhost:7357/assets/vendor.js, line 256
    ---
        browser log: |
            {"type":"error","text":"Uncaught Error: Could not find module `ember` imported from `(require)` at http://localhost:7357/assets/vendor.js, line 256\n","testContext":{}}

A quick-fix for ember-a11y-testing is to change config/optional-features.json to set jquery-integration to false (@scalvert is doing a PR for this).

[rwjblue]

ember-a11y-testing is unblocked now (in https://github.com/ember-a11y/ember-a11y-testing/pull/264)

[drewlee]

Wow, thanks for looking into this @rwjblue and @scalvert!