Module not found: Error: Can't resolve 'crypto'

[typeoneerror]

Discovered #2840 along with two other warnings.

Upgraded to 4.1.4 and the issue referenced in that PR went away, but two remain (one of which seems related).

Product: axe-core

Expectation: build without warnings

Actual:

Looks like two warnings.

1. the "deoptimized styling"...

⠼ building... [Bundler][BABEL] Note: The code generator has deoptimised the styling of /Users/typeoneerror/Dev/pn/liberator/src/es-student/node_modules/axe-core/axe.js as it exceeds the max of 500KB.
Hash: eec0cc47c69329902e13
Version: webpack 4.46.0
Time: 14359ms
Built at: 2021-04-14 11:14:34 a.m.
                                          Asset      Size             Chunks                                Chunk Names
                chunk.0.a732d854abff7e58bd66.js  15.3 KiB                  0  [emitted] [immutable]
                chunk.1.24f70e32c187061fc58d.js   155 KiB                  1  [emitted] [immutable]
              chunk.app.d932eaf004e2aac392ae.js  24.9 KiB                app  [emitted] [immutable]         app
            chunk.tests.85acc3076d461359d458.js  15.8 KiB              tests  [emitted] [immutable]         tests
      chunk.vendors~app.7ce4dcca7a2007bd7515.js  7.89 MiB        vendors~app  [emitted] [immutable]  [big]  vendors~app
chunk.vendors~app~tests.14fbc8ad9aa5f6cb458f.js   479 KiB  vendors~app~tests  [emitted] [immutable]  [big]  vendors~app~tests
    chunk.vendors~tests.1c0d66d852f055fd324d.js   874 KiB      vendors~tests  [emitted] [immutable]  [big]  vendors~tests
Entrypoint app [big] = chunk.vendors~app~tests.14fbc8ad9aa5f6cb458f.js chunk.vendors~app.7ce4dcca7a2007bd7515.js chunk.app.d932eaf004e2aac392ae.js
Entrypoint tests [big] = chunk.vendors~app~tests.14fbc8ad9aa5f6cb458f.js chunk.vendors~tests.1c0d66d852f055fd324d.js chunk.tests.85acc3076d461359d458.js
[0] multi /private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/l.js /private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/app.js 40 bytes {app} [built]
[1] multi /private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/l.js /private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/tests.js 40 bytes {tests} [built]
[../../../../../../../private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/app.js] /private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/app.js 9.63 KiB {app} [built]
[../../../../../../../private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/l.js] /private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/l.js 50 bytes {app} {tests} [built]
[../../../../../../../private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/tests.js] /private/var/folders/yn/_0qbzlyj0d18mfywbnvshx1c0000gn/T/broccoli-86194fuVaC5TUTpRx/cache-1203-bundler/staging/tests.js 1.53 KiB {tests} [built]
[./node_modules/@panzoom/panzoom/dist/panzoom.es.js] 22.7 KiB {vendors~app} [built]
[./node_modules/@precision-nutrition/courier/node_modules/qs/lib/index.js] 206 bytes {vendors~app} [built]
[./node_modules/@precision-nutrition/elements/dist/collection/util/varieties.js] 228 bytes {vendors~tests} [built]
[./node_modules/@precision-nutrition/elements/dist/loader/index.js] 271 KiB {vendors~app~tests} [built]
[./node_modules/@sentry/browser/esm/index.js] 708 bytes {vendors~app} [built]
[./node_modules/@sentry/integrations/esm/ember.js] 1.94 KiB {vendors~app} [built]
[./node_modules/autolinker/dist/es2015/index.js] 533 bytes {vendors~app} [built]
[./node_modules/axe-core/axe.js] 591 KiB {vendors~tests} [built]
[./node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js] 7.81 KiB {vendors~app} [built]
[./node_modules/bowser/src/bowser.js] 18.3 KiB {vendors~app} [built]
    + 2624 hidden modules

Might be a non-issue.

2. This can't resolve 'crypto' warning...

WARNING in ./node_modules/axe-core/axe.js
Module not found: Error: Can't resolve 'crypto' in '/Users/typeoneerror/Dev/pn/liberator/src/es-student/node_modules/axe-core'
 @ ./node_modules/axe-core/axe.js

I attempted setting

browser: {
  crypto: false
}

In package.json based on some related issues in other libs.

Motivation: no warnings

axe-core version: 4.1.4
via ember-a11y-testing: 4.0.2

Browser and Assistive Technology versions

For Tooling issues:
- Node version: 14.5.4
- Platform:  macOS 10.15.7

[straker]

Interesting. I take it you're using webpack for the first issue (or both)? What does your webpack config look like?

[typeoneerror]

@straker As far as I can tell, we recently added https://github.com/ember-a11y/ember-a11y-testing to our stack (this is an ember app). We do not use webpack directly, it's included via https://github.com/ef4/ember-auto-import.

I think that warning is probably safe to ignore, but the other one is puzzling.

[ef4]

"Deoptimized styling" is not the fault of axe-core, we can address that in the babel settings. The other warning about crypto though would be good to fix here. One way would be to split the node-specific parts of the implementation into a separate file so that browsers can use only the part that doesn't refer to any node-isms.

[ef4]

I addressed the "deoptimized styling" warning for anyone consuming axe-core (or anything else that ships a file bigger than 500kb) via ember-auto-import in embroider-build/ember-auto-import#386

[WilcoFiers]

As of axe-core 4.1.3, axe-core attempts to use window.crypto, or require('crypto') before defaulting to Math.random(). This happens in try/catch blocks, so if the require call throws axe-core will simply ignore it and move on to the default. This does add a little quirk if you're trying to bundle axe-core. Axe-core does not officially support being bundled, but it does happen plenty. Deque does this for some of our own products too.

The problem we found using Webpack was that it would swap in crypto-browserify. That is completely unnecessary, and will throw if you try to use it in JSDOM. The fix we found was to set crypto as one of the externals in webpack.config.js (i.e. externals: ['crypto']).

Bundlers do all sorts of odd and unpredictable things. It's not something we can really code against. My guess is your problem comes from the same source; axe-core gets too big because webpack pulls in crypto-browserify when it shouldn't. Axe-core has no external dependencies. It comes pre-bundled. The axe.js file should not get significantly bigger when bundled. Nor will it ever exceed that 500k limit.

[ef4]

Bundlers do all sorts of odd and unpredictable things. It's not something we can really code against.

While I relate 100% and have shared this pain, standards for solving this particular problem have improved immensely recently.

Stable node has support for conditional exports and the popular bundlers have all fallen into line by following that spec. It lets you swap out the implementation of a file based on the conditions in which it will be used (node vs browser being the most relevant here).

The root problem here is that require is not a normal function. It has magic behavior that a normal function couldn't have (for one thing, it returns a different answer depending on which file calls it, which is otherwise impossible for a true javascript function). Because it's magic, bundlers need to handle it statically, but are up against the halting problem when it comes to figuring out if it's really going to be called in a given file. Because it's magic, library code that uses it isn't really portable.

[WilcoFiers]

My comment above should solve this issue.

We'll keep an eye on this. I suspect there are only a hand full of projects that need to bundle axe-core, and it'll be more efficient for each of them to work out the best solve for their repo, then it is for us to maintain a comprehensive list of bundlers and plugins for bundlers and how to bundle axe-core in it.

If this turns out to be a more frequent issue than I expect, we'll revisit.

[ef4]

maintain a comprehensive list of bundlers and plugins for bundlers

The whole point of Node standardizing conditional exports is so you don't need to maintain anything bundler-specific.

[WilcoFiers]

You're right, and axe-core may very well adopt conditional exports at some point. Conditional exports doesn't actually solve the problem though. We'd need to create two variations of axe-core, one that has the require('crypto') call in it, and one without. That's not a trivial change, and I'm not entirely sure what the implications of that would be. If someone uses the wrong one, for whatever reason, it could lead result in a security problem.

[dylanb]

@WilcoFiers lets get rid of the dependency on crypto

[Develliot]

I tried theexternals: ['crypto'] solution and it didn't solve the issue for me :(

I'm using cypress-axe

[illume]

Hello,

I see this issue after upgrading to Create React App 5, which uses Webpack 5 (instead of Webpack 4). It seems Webpack 4 was automagically using a crypto polyfill.

"@axe-core/react": "^4.3.2",

Here's the messages it gives:

WARNING in ./node_modules/@axe-core/react/node_modules/axe-core/axe.js 6752:25-42
Module not found: Error: Can't resolve 'crypto' in '/home/rene/dev/headlamp/frontend/node_modules/@axe-core/react/node_modules/axe-core'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
 @ ./node_modules/@axe-core/react/dist/index.js 19:14-33
 @ ./src/index.tsx 16:14-40

[WilcoFiers]

Thanks for bringing this up. This continues to come up. I'm going to see if we can take it out safely. It shouldn't be necessary.

[a-zog]

Hi, I've had the same issue. Would you please suggest a workaround?
Thank you in advance 🙏

[straker]

We have removed crypto and it should be released next week with axe-core v4.4.