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

[Artur-]

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.

[vursen]

It may be a regression that emerged as a result of these PRs:

• fix: avoid caching transform result of invalidated module #7254
• fix: pending requests after module invalidation #7283

[patak-dev]

@Artur- @vursen would you test the latest [email protected] version?
Reopening this issue as we may need to work on the problem. Please close it if beta.3 is working well for you.

[Artur-]

Tested. I see the same problem with beta3

[patak-dev]

Thanks Artur-, I'll keep working on it. Would you share the complete logs you see?

[patak-dev]

@Artur- I managed to get your setup working, and with beta.2 I see the error you reported, but with beta.3 it is working well for me, in the same way as with beta.0.
Would you check that beta.3 was correctly used in your test? I'm running using:

rm -rf node_modules/.vite && ./mvnw

[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:

Screen.Recording.2022-03-16.at.16.33.06.mov

[Artur-]

I posted the --debug log for one run at https://gist.github.com/Artur-/4eb64d7bf46f4a4cf1d3e515cb925264

A curious fact is that the log only mentions ?v=29bdd27b and not at all the other v identifier used by the browser (?v= 21f1cfc0 I think in this case)

[Artur-]

The other observation: It reproduces on refresh also. There is no need to remove .vite or restart the server.

Right now I see that
http://localhost:8080/VAADIN/@fs/projectFolder/node_modules/.vite/deps/@fooloomanzoo_color-picker_color-element.js?v=201b8ec3 is loaded with this content

import {
  ColorElement,
  ColorElementPattern
} from "/VAADIN/@fs/projectFolder/node_modules/.vite/deps/chunk-3KNTAQB7.js";
import "/VAADIN/@fs/projectFolder/node_modules/.vite/deps/chunk-OO5LXEG7.js";

and
chunk-3KNTAQB7.js contains

// node_modules/@fooloomanzoo/color-picker/color-element.js
import { PolymerElement as PolymerElement4 } from "/VAADIN/@fs/projectFolder/node_modules/@polymer/polymer/polymer-element.js?v=4f2f0800";
import { html as html9 } from "/VAADIN/@fs/projectFolder/node_modules/@polymer/polymer/lib/utils/html-tag.js?v=4f2f0800";
import { dedupingMixin as dedupingMixin7 } from "/VAADIN/@fs/projectFolder/node_modules/@polymer/polymer/lib/utils/mixin.js?v=4f2f0800";
import { GestureEventListeners } from "/VAADIN/@fs/projectFolder/node_modules/@polymer/polymer/lib/mixins/gesture-event-listeners.js?v=4f2f0800";

This seems where the ?v mismatch is introduced

[patak-dev]

Thanks for digging into the issue, it helped me understand the problem. #7350 should fix this. We'll merge it once GitHub decides to work again and runs the required CI tests

[Artur-]

Nice! I will test once there is a beta 4

[patak-dev]

@Artur- [email protected] has been released. We may continue doing changes for cold-start though, see #7379, we could also avoid blocking during the scan phase

[Artur-]

🎉 beta 4 works like a charm