importAnalysisBuild.ts injects same CSS styles multiple times

[daniele-orlando]

Expected

Hydrating a React app, server side rendered through Puppeteer, I expect that CSS styles already injected inside the index.html file, are not injected a second time at runtime.

Actual

The preload() function from the packages/vite/src/node/plugins/importAnalysisBuild.ts
file is failing detecting already injected stylesheets, and injects them a second time.

A picture is worth a thousand words.

Analysis

I discovered that the check at line 110 does not handle all cases. From my test, it can be corrected changing this block.

- if (link.href === dep && (!isCss || link.rel === 'stylesheet')) {
+ if ((link.href === dep || link.getAttribute('href') === dep) && (!isCss || link.rel === 'stylesheet')) {

The point is that the routine should test even the href attribute, and not only the href property.

Reproduction

https://stackblitz.com/edit/vitejs-vite-qcgqrn?file=index.html

Steps to reproduce

I explain the reproduction steps inside the README of the reproduction repository here

https://stackblitz.com/edit/vitejs-vite-qcgqrn?file=README.md

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: 4.0.0 => 4.0.0 
    vite: 4.3.5 => 4.3.5

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 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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-qcgqrn (Open reproduction)

[sapphi-red]

I guess the problem here is this dep variable doesn't have an absolute URL.

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

Line 95 in 9a7ec98

dep = assetsURL(dep, importerUrl)

This is because this function is used

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

Line 178 in 9a7ec98

`function(dep, importerUrl) { return dep.startsWith('.') ? new URL(dep, importerUrl).href : dep }`

instead of

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

Line 183 in 9a7ec98

`function(dep, importerUrl) { return new URL(dep, importerUrl).href }`

(modulePreload.resolveDependencies is set).

[daniele-orlando]

Yes exactly. The dep and the href attribute have a relative path, while the href prop has an absolute path.

[daniele-orlando]

Hello dear Vite maintainers. Is there any progress on this bug?

[dominiklippl]

@daniele-orlando I have the same Problem. My server already renders the link in the HTML, when the client hydrates the DOM the stylesheet link gets added a second time.
I managed to "fix" this with the experimental renderBuiltUrl function.

export default defineConfig({
  plugins: [vue()],
  experimental: {
    renderBuiltUrl(filename) {
      // make css assets relative
      if (filename.includes('.css')) {
        return { relative: true };
      }
    }
  }
});

This will make the file path relative and the if (link.href === dep && (!isCss || link.rel === 'stylesheet')) will return true.
I don't know what edge cases or problems might occur as a result, but it's working at the moment.