index.html without JS breaks multi-page app setup linking to the same stylesheet

[patak-dev]

Describe the bug

There are two entry points (index.html and nojs.html). Both of them link to the same CSS stylesheet. There is an import for import"./nojs-ab7f0fe6.js"; in the generated main output, importing a file that doesn't exists in the dist folder.

Note: Originally as #13426. Starting a new issue with a simplified reproduction.

Reproduction

https://stackblitz.com/edit/vitejs-vite-uhnk5n

Steps to reproduce

npm install
npm run build

System Info

StackBlitz

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-uhnk5n (Open reproduction)

[sun0day]

Can't reproduce it in 4.4.0-beta.2

[patak-dev]

That's strange, I can still reproduce it with 4.4.0-beta.2 🤔
https://stackblitz.com/edit/vitejs-vite-uhnk5n

[sun0day]

That's strange, I can still reproduce it with 4.4.0-beta.2 🤔 https://stackblitz.com/edit/vitejs-vite-uhnk5n

Emm, you can click the fix this issue to see the building output.

[patak-dev]

I did that, and I still see

import"./nojs-ab7f0fe6.js";(function(){const t=document.createElement("link").

And I also tried it locally, still the same.

[sun0day]

Have you tried vite main branch latest commit?

I couldn't reproduce it both in stackblitz and local via main.

And yeah, using 4.4.0-beta.2 package directly could reproduce it.

Isn't main latest commit the same as the published package?

[patak-dev]

Locally I can't reproduce it when linking against Vite main. But it is the same commit, so maybe the fact that we are linking affects this bug? I'm even more puzzled now.

[sun0day]

4.4.0-beta.2 package will use the latest rollup@3.25.1 while main branch was locked in rollup@3.21.0, the source chunks generating logics are different in these two versions. So it might be a rollup issue.

Possibly related to rollup/rollup#4989

[patak-dev]

Ah, good catch, we should update the rollup version before releasing 4.4 then 👍🏼

[sun0day]

Ah, good catch, we should update the rollup version before releasing 4.4 then 👍🏼

I can offer a rollup upgrade PR. Then we could see how to fix this issue

[Pumpuli]

As far as I can see this can still be reproduced. That's with vite@4.4.0-beta.2 & rollup@3.25.1 as well as with vite@4.4.2 & rollup@3.26.2.

[martinburger]

I ran into the same issue. Or at least a very similar one. I am using the approach described in Multi-Page App to create a custom 404 error page:

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  appType: 'mpa', // https://stackoverflow.com/a/69711988/66981
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        404: resolve(__dirname, '404.html')
      }
    }
  }
})

The 404.html file doesn't reference any JS file. Since upgrading Vite from 4.3.9 to 4.4.0, I get the following error when previewing the production build of the index.html file locally: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8182/assets/404-5d2c34d3.js.

As soon as I reference any JS file in 404.html, my site works again.

[haltcase]

I think this should be reopened. I am also reproducing this in the same way with the latest release (currently 4.4.7). I have several build.rollupOptions.input entries, only 1 of which (index.html) imports any JS.

It seems that a JS file import is being added to the JS entry for index.html (though in previous 4.4.x versions a <script> tag was being added), but that file is not being emitted (because it shouldn't be). Also, only 1 of these other input entries has this import added, so if the above example had e.g., main, 404, and 418 a JS import would be added for 404-{hash}.js but nothing for 418-{hash}.js.

As @martinburger mentioned, if you add any <script> tag reference to a JS file in those other input entries, the site will work again, but only because the rogue asset that shouldn't be emitted is being emitted while still being referenced.

[patak-dev]

Thanks for the heads up, this seems broken again. I updated the repro above to vite@4.4.7. Let's reopen the issue.