Duplicate loading of the same resource on startup with Vite 2.9 beta1+

Describe the bug

On the first page load in Chrome, after removing node_modules/.vite I see only a blank page. The reason is

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "dom-module" has already been used with this registry

which in turn originates in that a JS file is loaded twice with different ?v= parameters

It is a timing issue because if I open the Chrome inspector then the issue disappears and the vaadin.js file is still loaded twice but with the same ?v= parameter.

With 2.9.0.beta0 I do not see this problem

Reproduction

Cannot make a simple app. @patak-dev has access to the application where it can be reproduced

System Info

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.24 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.6.0 - ~/.nvm/versions/node/v17.6.0/bin/node
    npm: 8.5.1 - ~/.nvm/versions/node/v17.6.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Firefox: 98.0
    Safari: 15.3
  npmPackages:
    vite: v2.9.0-beta.1 => 2.9.0-beta.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Artur-]

Nice! I will test once there is a beta 4

[vursen]

I can confirm that the error is still there even with beta.3. Make sure you don’t open DevTools with the enabled Disable cache option when running the app as otherwise, the issue doesn’t tend to reproduce.

Considering the latter note, it seems to have something to do with the browser cache. The page gets stuck because of the duplicate of the vaadin.js dependency where the difference is only in the version parameter, but once I enable Disable cache in DevTools and reload the page, the page loads correctly. It is just a guess, but maybe it is the ETag header not getting updated after the deps optimization is complete.

Here is the recording:

https://user-images.githubusercontent.com/5039436/158601475-63ec5512-64f7-4dad-8737-0d8efad39754.mov