vite, hmr, & webpack Script Tag Duplication

mrose commented 5 hours ago

Describe the bug

Using page-based routing, when I use Suspense the three scripts are duplicated. The duplicated scripts appear after the suspended component is rendered on the browser. Let me know if you need more to repro.

Reproduction

No response

Steps to reproduce

Create an async page which imports a Delay component and React Suspense. The async Delay component uses setTimeout to delay the output of some text. Open the dev server and display the page in the browser.

System Info

System:
    OS: Linux 6.1 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7B13
    Memory: 45.26 GB / 62.79 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.17.0/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.9.0 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
  npmPackages:
    @lazarv/react-server: v0.0.0-experimental-63ba3e1-20241108-58695b8a => 0.0.0-experimental-63ba3e1-20241108-58695b8a 
    vite: 6.0.0-beta.8 => 6.0.0-beta.8

Used Package Manager

pnpm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
[X] The provided reproduction is a minimal reproducible example of the bug.

lazarv commented 4 hours ago

Thanks for reporting @mrose! I was able to reproduce the bug and this happens when you don't use any client components before a Suspense boundary, but then you're adding a client component inside the Suspense. A fix is already on the way!

lazarv commented 35 minutes ago

Please check this issue using the latest version of the framework, as it is now available to install. Please let me know if the issue persists in another use case and if so, then please provide a reproduction to have more info on this.

lazarv / react-server