Incorrect preload URLs for external resources

[idleberg]

Describe the bug

I'm using Vite with both, independent React and Svelte project, and the default HTML template (index.html) as an entry-point. The project import web-components from an URL through a script tag in the template.

<script type="module" src="<%= VITE_HEADER_WEB_COMPONENT %>"></script> 

The web component is served from a different origin than the actual project. The preload tags inserted in the build-process are relative to the project's base and don't respect external origins.

While this is clearly a bug, I want to repeat concerns expressed in other issues (#3133, #5120). I think that automatic insertion of preload can work for smaller projects. However, for bigger projects finding the optimal caching strategy is far more complex and preloading all resources can have a negative impact on performance. In my particular case, I wasn't able to prevent the preloading using optimizeDeps.exclude. Using library mode to prevent preloading is no viable option. It would really help to have an independent setting to disable preloading altogether.

Reproduction

Config:

VITE_HEADER_WEB_COMPONENT=http://mycdn.com/component/header.mjs

HTML Output:

<!-- single header chunks omitted for brevity -->
<link rel="modulepreload" as="script" crossorigin="" href="assets/header.mjs">

Note: Not only does it use a relative path, it also uses the incorrect path!

Console Output:

header.mjs:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

The expected preload tag would be

<link rel="modulepreload" as="script" crossorigin="" href="http://mycdn.com/component/header.mjs">

System Info

System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
    Memory: 3.82 GB / 15.95 GB
  Binaries:
    Node: 16.10.0 - ~\AppData\Local\Volta\tools\image\node\16.10.0\node.EXE
    Yarn: 1.22.10 - ~\AppData\Local\Volta\tools\image\yarn\1.22.10\bin\yarn.CMD
    npm: 7.20.3 - ~\AppData\Local\Volta\tools\image\npm\7.20.3\bin\npm.CMD
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.37)
    Internet Explorer: 11.0.19041.1202

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/vue-next 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.

[geekftz]

i got same porblem like you, have you fix it?

[idleberg]

i got same porblem like you, have you fix it?

I have tried to write a Vite transformer plugin, but it did have no influence on preload tags. I think this is a clear bug and should be resolved by the Vite developers.

[idleberg]

We have identified the problem. The imported web component had no base defined, while the importing project uses a relative base. The imported component now uses an absolute URL as base, which fixes the preloads in the importing project.