[BUG] crypto.getRandomValues() not supported ember.js w/fastboot.js

[hoIIer]

Before you begin...

• I have searched the existing issues
• I am not using version 13.x of node (if so, please upgrade)

Description of the problem

Just upgraded to latest 9.0.0 and getting this error. Saw a few closed issues that pertain to react-native.

How can I resolve this in an ember.js project?

Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported
at rng (webpack://ember_auto_import/./node_modules/uuid/dist/commonjs-browser/rng.js?:6:133)
at v4 (webpack://ember_auto_import/./node_modules/uuid/dist/commonjs-browser/v4.js?:1:727)

Recipe for reproducing

install latest, run ember-cli dev server "ember s"

Additional information

n/a

Environment

npx envinfo --system --browsers --npmPackages --binaries
npx: installed 1 in 1.628s

System:
OS: macOS 11.6.8
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Memory: 1.21 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.21.2 - ~/.nvm/versions/node/v14.21.2/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.19.3 - ~/Projects/sqwok/ember-sqwok/node_modules/.bin/npm
Browsers:
Chrome: 108.0.5359.124
Firefox: 108.0.1
Safari: 15.6.1
npmPackages:
@babel/eslint-parser: 7.19.1 => 7.19.1
@babel/plugin-proposal-decorators: 7.20.7 => 7.20.7
@ember/optional-features: 2.0.0 => 2.0.0
@ember/render-modifiers: 2.0.4 => 2.0.4
@ember/test-helpers: 2.9.3 => 2.9.3
@faker-js/faker: ^7.6.0 => 7.6.0
@fortawesome/ember-fontawesome: 0.4.1 => 0.4.1
@fortawesome/pro-regular-svg-icons: 5.12.1 => 5.12.1
@fortawesome/pro-solid-svg-icons: 6.1.1 => 6.1.1
@glimmer/component: 1.1.2 => 1.1.2
@glimmer/tracking: 1.1.2 => 1.1.2
async-mqtt: 2.6.3 => 2.6.3
babel-plugin-transform-remove-console: 6.9.4 => 6.9.4
broccoli-asset-rev: 3.0.0 => 3.0.0
croppr: 2.3.1 => 2.3.1
dayjs: 1.11.7 => 1.11.7
ember-auto-import: 2.4.0 => 2.4.0
ember-basic-dropdown: 6.0.1 => 6.0.1
ember-changeset: 4.1.2 => 4.1.2
ember-changeset-validations: 4.1.1 => 4.1.1
ember-cli: ~4.7.0 => 4.7.0
ember-cli-app-version: 5.0.0 => 5.0.0
ember-cli-babel: 7.26.11 => 7.26.11
ember-cli-fastboot: 4.1.0 => 4.1.0
ember-cli-head: 2.0.0 => 2.0.0
ember-cli-htmlbars: 6.1.1 => 6.1.1
ember-cli-inject-live-reload: 2.1.0 => 2.1.0
ember-cli-mirage: 2.4.0 => 2.4.0
ember-cli-qunit-parameterize: 2.0.0 => 2.0.0
ember-cli-sass: 10.0.0 => 10.0.0
ember-cli-sri: 2.1.1 => 2.1.1
ember-cli-terser: 4.0.2 => 4.0.2
ember-component-css: 0.7.4 => 0.7.4
ember-concurrency: 2.3.7 => 2.3.7
ember-data: ~4.7.0 => 4.7.3
ember-exam: 8.0.0 => 8.0.0
ember-fetch: 8.1.2 => 8.1.2
ember-href-to: 5.0.0 => 5.0.0
ember-in-viewport: 4.1.0 => 4.1.0
ember-load-initializers: 2.1.2 => 2.1.2
ember-modifier: 4.0.0 => 4.0.0
ember-page-title: 7.0.0 => 7.0.0
ember-qunit: 6.1.1 => 6.1.1
ember-resolver: 9.0.1 => 9.0.1
ember-responsive: 5.0.0 => 5.0.0
ember-simple-auth: 4.2.2 => 4.2.2
ember-simple-auth-token: 5.3.1 => 5.3.1
ember-sinon-qunit: 6.0.0 => 6.0.0
ember-source: ~4.7.0 => 4.7.1
ember-template-lint: 5.3.0 => 5.3.0
ember-test-selectors: 6.0.0 => 6.0.0
eslint: 8.11.0 => 8.11.0
eslint-config-airbnb-base: 15.0.0 => 15.0.0
eslint-plugin-compat: 4.0.2 => 4.0.2
eslint-plugin-ember: 10.5.9 => 10.5.9
eslint-plugin-import: 2.25.4 => 2.25.4
eslint-plugin-node: 11.1.0 => 11.1.0
eslint-plugin-qunit: 7.2.0 => 7.2.0
faker: 6.6.6 => 6.6.6
loader.js: 4.7.0 => 4.7.0
qunit: 2.19.3 => 2.19.3
qunit-dom: 2.0.0 => 2.0.0
sass: 1.49.9 => 1.49.9
uuid: 8.3.2 => 8.3.2
webpack: 5.75.0 => 5.75.0

[broofa]

Recipe is not sufficient to reproduce the problem.

$ npm install ember-cli
# etc ...

$ ember s
No ember-cli-build.js found.

Note: envinfo shows you have uuid@8.3.2 installed, not uuid@9. 🤷

[hoIIer]

@broofa the real issue is that the app is running fastboot.js which is for server-side render and uses node.js, where crypto lib lacks the window.crypto.getRandomValues().

I found this https://stackoverflow.com/questions/25725596/use-window-crypto-in-nodejs-code

Could it be possible to set the rng to use webcrypto w/node? https://stackoverflow.com/a/66692815

[broofa]

uuid uses crypto.randomFillSync() on node (source) and crypto.getRandomValues() in the browser (source).

Is it possible you have your project misconfigured to bundle code for the browser rather than for node?

Without a test case demonstrating an actual error, this isn't something we're going to spend time investigating.

[ctavan]

This is definitely a problem with the bundler configuration: Before version 9 we did not ship a CommonJS browser build. This was changed in #642 for better Jest/JSdom compatibility. It is known to be a breaking change since some bundler configurations that may have picked the Node.js CommonJS build as a fallback before may now instead pick the CommonJS browser build.

To solve this issue, make sure your bundler picks the right build from the exports:

uuid/package.json

Lines 25 to 37 in 62ef29e

	"exports": {
	".": {
	"node": {
	"module": "./dist/esm-node/index.js",
	"require": "./dist/index.js",
	"import": "./wrapper.mjs"
	},
	"browser": {
	"import": "./dist/esm-browser/index.js",
	"require": "./dist/commonjs-browser/index.js"
	},
	"default": "./dist/esm-browser/index.js"
	},

In webpack, these kinds of issues often happen due to bad resolve.mainFields configs (see #314 (comment)), I'm not familiar with what ember does under the hood but maybe these pointers will help figure it out.

[hoIIer]

@ctavan thanks for the pointer, I assume I have to set something here, but having just played around with it a bit I still can't figure it out.

The app renders initially w/node, then browser (spa w/ssr).

I opened a ticket w/ember-auto-import to see if I can get help from that side, thank you.