[Bug]: Jest resolves browser version of modules instead of node

[Saegrov]

Version

28.0.2

Steps to reproduce

1. Clone repo https://github.com/Saegrov/jest-28-regression
2. npm install
3. npm run test

When the tests run, they fail because the browser version of both uuid- and nanoid-packages are loaded.
There seems to be an issue/change with how modules are resolved in Jest 28.

Expected behavior

Expected the tests to pass and that the node-versions of the packages uuid and nanoid to be loaded.

Actual behavior

The tests failes to execute with the following error message.

Details:

   /jest-bug/node_modules/uuid/dist/esm-browser/index.js:1
   ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
                                                                                     ^^^^^^

   SyntaxError: Unexpected token 'export'

   > 1 | import { v4 } from "uuid";
       | ^
     2 | import { nanoid } from "nanoid";
     3 |
     4 | export function getUuid() {

     at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1773:14)

The root cause seems to be that dist/esm-browser/index.js is loaded instead of the node version.

Additional context

Since the tests fail because of parsing error, I tried adding the following jest-config to transform the uuid-module.

// jest.config.js
module.exports = {
  testEnvironment: "jsdom",
  transformIgnorePatterns: ['/node_modules/(?!(uuid|nanoid)/)'],
};

This fixes the parsing errors, but fails with a new error:

Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported

    at rng (/jest-bug/node_modules/uuid/dist/esm-browser/rng.js:14:13)
    at v4 (/jest-bug/node_modules/uuid/dist/esm-browser/v4.js:6:32)
    at getUuid (/jest-bug/index.js:5:10)

I also tried adding a custom resolver to load the correct version of UUID:

//jest.config.js
module.exports = {
  testEnvironment: "jsdom",
  transformIgnorePatterns: ['/node_modules/(?!(nanoid)/)'],
  resolver: '<rootDir>/resolver.js'
};

// resolver.js
module.exports = (path, options) => {
    const defaultConditions = options.conditions || [];
    // Call the defaultResolver, so we leverage its cache, error handling, etc.
    return options.defaultResolver(path, {
        ...options,
        conditions: ['node', ...defaultConditions],
    });
};

This jest.config.js manages to load the correct version of UUID, but yields error for nanoid:

crypto is not defined
ReferenceError: crypto is not defined
    at reduce (/jest-bug/node_modules/nanoid/index.browser.js:21:48)
    at getNanoId (/jest-bug/index.js:9:10)
    at Object.<anonymous> (/jest-bug/index.test.js:8:10)

I've had no success in creating a workaround for nanoid so that the correct node-implementation of nanoid gets loaded.

Environment

System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  npmPackages:
    jest: ^28.0.2 => 28.0.2

[SimenB]

Yeah, this is known as uuid does not provide a CJS build for the browser. See uuidjs/uuid#616. It's probably easier to load the node version than making the browser version work in jsdom. (same with nanoid)

That said, there is a PR for crypto.getRandomValues, so might not be too far out: jsdom/jsdom#3352

[SimenB]

I'll add it to the upgrade guide

[SimenB]

Tweaked docs in #12771 🙂

[Saegrov]

Thanks for quick response @SimenB!
For people looking for workarounds for uuid: This comment sums it up really good:
microsoft/accessibility-insights-web#5421 (comment)

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.