bug: Dependency mismatch with certain libraries when hydrate output target

[zagnut007]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.9.0

Current Behavior

Certain libraries are installing newer versions of dependencies that are breaking the hydrate output target.

Cypress version 13.6.4 (https://www.npmjs.com/package/cypress) UUID version 9.0.1 (https://www.npmjs.com/package/uuid)

Currently we are limited to either not including those libraries or using older versions that don't inject the dependency problem.

Expected Behavior

StencilJS should be able to work along side newer versions of libraries like Cypress and UUID.

System Info

System: node 18.19.0
    Platform: darwin (23.3.0)
   CPU Model: Apple M2 (8 cpus)
    Compiler: /Users/kblank/Documents/bam/bam-scripts/node_modules/@stencil/core/compiler/stencil.js
       Build: 1702922611
     Stencil: 4.9.0 🐏
  TypeScript: 5.2.2
      Rollup: 2.42.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.26.0

Error Text:

diagnostics: [
action_dev_bam  |     {
action_dev_bam  |       level: 'error',
action_dev_bam  |       type: 'build',
action_dev_bam  |       header: 'Hydrate Error',
action_dev_bam  |       messageText: 'Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported\n' +
action_dev_bam  |         '    at rng (/var/dev/bam-scripts/hydrate/index.js:11187:13)\n' +
action_dev_bam  |         '    at v4 (/var/dev/bam-scripts/hydrate/index.js:11222:54)\n' +
action_dev_bam  |         '    at hydrateAppClosure (/var/dev/bam-scripts/hydrate/index.js:13222:14)\n' +
action_dev_bam  |         '    at hydrateFactory (/var/dev/bam-scripts/hydrate/index.js:21005:3)\n' +
action_dev_bam  |         '    at render (/var/dev/bam-scripts/hydrate/index.js:21272:9)\n' +
action_dev_bam  |         '    at /var/dev/bam-scripts/hydrate/index.js:21182:73\n' +
action_dev_bam  |         '    at new Promise (<anonymous>)\n' +
action_dev_bam  |         '    at renderToString (/var/dev/bam-scripts/hydrate/index.js:21178:33)\n' +
action_dev_bam  |         '    at getHydratedHtml (/var/dev/dao/hydrate.ts:32:40)\n' +
action_dev_bam  |         '    at Object.getTemplate [as handler] (/var/dev/controllers/v1/render.ts:11:27)',
action_dev_bam  |       relFilePath: undefined,
action_dev_bam  |       absFilePath: undefined,
action_dev_bam  |       lines: []
action_dev_bam  |     }
action_dev_bam  |   ],

Steps to Reproduce

1. Installed starter project
2. Installed uuid npm i uuid
3. Added a uuid to the my-component
4. Added the hydrate output target to the Stencil config
5. Ran a build
6. Created an example.js file in the /hydrate folder to view the hydrate result

Code Reproduction URL

https://github.com/zagnut007/stenciljs-example

Additional Information

No response

[rwaskiewicz]

Hey @zagnut007 👋

Thanks for the issue! Do you know of any previous versions of UUID where this did work by chance? Going back a few major versions of the library, I can reproduce this - unsure if this is from UUID getting newly pulled in by cypress or this was previously working on an older version of UUID.

Interestingly enough, this doesn't seem to reproduce on Node 20, but does on Node 18 🤔

[zagnut007]

I didn't try on any older versions of UUID. I am using version 12 of Cypress and everything is working. It's only upgrading to the next major version that introduces the collision.

[rwaskiewicz]

Gotcha, thanks! Would it possible to pull in a polyfill for crypto if you're stuck (I assume) on Node 18?

I'm going to label this to get in our backlog for someone to take a closer look

[christian-bromann]

It seems I am not able to reproduce this anymore. This even works for me with Node.js v16. I am also using Mac with an M2 chip and am getting:

❯ nvm use 18
Now using node v18.20.2 (npm v10.5.0)
❯ npm test

> [email protected] test
> stencil test --spec --e2e

[55:48.5]  @stencil/core
[55:48.7]  v4.12.4 🐮
[55:48.7]  testing e2e and spec files
[55:49.4]  build, example, dev mode, started ...
[55:49.5]  transpile started ...
[55:50.5]  transpile finished in 928 ms
[55:50.5]  copy started ...
[55:50.5]  generate custom elements + source maps started ...
[55:50.5]  generate hydrate app started ...
[55:50.5]  generate lazy + source maps started ...
[55:50.6]  copy finished (0 files) in 118 ms
[55:50.8]  generate custom elements + source maps finished in 309 ms
[55:51.0]  generate lazy + source maps finished in 505 ms
[55:51.0]  generate hydrate app finished in 506 ms
[55:51.0]  build finished in 1.65 s

[55:51.0]  jest args: --spec --e2e --max-workers=8
 FAIL  src/components/my-component/my-component.e2e.ts
  ● my-component › renders changes to the name data

    expect(received).toEqual(expected) // deep equality

    Expected: "Hello, World! I'm "
    Received: "Hello, World! I'm  afd57d48-f781-4c4d-bed2-8d74ca2c521f"

      16 |     const component = await page.find('my-component');
      17 |     const element = await page.find('my-component >>> div');
    > 18 |     expect(element.textContent).toEqual(`Hello, World! I'm `);
         |                                 ^
      19 |
      20 |     component.setProperty('first', 'James');
      21 |     await page.waitForChanges();

      at Object.<anonymous> (src/components/my-component/my-component.e2e.ts:18:33)

Compiling works too:

❯ node -v
v18.20.2
❯ npm run build

> [email protected] build
> stencil build

[57:14.5]  @stencil/core
[57:14.7]  v4.12.4 🐮
[57:15.3]  build, example, prod mode, started ...
[57:15.3]  transpile started ...
[57:16.5]  transpile finished in 1.19 s
[57:16.5]  copy started ...
[57:16.5]  generate custom elements + source maps started ...
[57:16.5]  generate hydrate app started ...
[57:16.5]  generate lazy + source maps started ...
[57:16.6]  copy finished (0 files) in 102 ms
[57:17.0]  generate custom elements + source maps finished in 471 ms
[57:17.0]  generate hydrate app finished in 471 ms
[57:17.0]  generate lazy + source maps finished in 475 ms
[57:17.0]  build finished in 1.71 s

Anything I am missing?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!