vite 5.1.3 will lost js & css in html if build.rollupOptions.input is relative path

[wxpwxpwxp]

Describe the bug

vite 5.1.3 will lost js & css in html after build multiple html input
it works in vite4

Reproduction

https://github.com/wxpwxpwxp/multi_page_vite_demo/tree/master

Steps to reproduce

cd vite5
pnpm i
pnpm run build

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 7.86 GB / 15.80 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-vue: ^5.0.4 => 5.0.4 
    vite: ^5.1.3 => 5.1.3

Used Package Manager

pnpm

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.

[dresch86]

I am experiencing the same thing but I don't think the problem is multi builds per se. The issue happens when you add the rollupOptions even on single entry builds:

    rollupOptions: {
      input: globSync(['index.html', 'admin/**/*.html', 'community/**/*.html']),
    },

When I built with:

    rollupOptions: {
      input: {
            test: "index.html"
        },
    },

It still failed to include the JS and CSS.

Edit: I tried with Vite 4.5.2 and everything worked as expected. There must be an issue with Vite 5 and Rollup.

[sapphi-red]

This seems to only happen on Windows.

A workaround is to call path.resolve:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        index: path.resolve('index.html'),
        test: path.resolve('test.html')
      }
    }
  }
})

[sapphi-red]

related: #15153

[katanazero86]

I am also experiencing the same phenomenon. When built, the files exist in dist but are not referenced in html.

On the other hand, if you use Vite version 4.5.2, you can see that the reference is inserted normally.

import multiInput from "rollup-plugin-multi-input";

export default {
    root: 'pages',
    publicDir: '../public',
    build: {
        target: 'esnext',
        outDir: '../dist',
        rollupOptions: {
            input: [
                'pages/**/*.html'
            ],
            plugins: [multiInput.default()],
        },
    },
    server: {
        port: 8080,
    }
}

[dresch86]

This seems to only happen on Windows.

A workaround is to call path.resolve:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        index: path.resolve('index.html'),
        test: path.resolve('test.html')
      }
    }
  }
})

The workaround becomes an issue if one is using glob to get the paths. For multipage applications, you're going to have to resolve multiple files which could become unmaintainable depending on the number.

EDIT: This should work for now...

  build: {
    emptyOutDir: true,
    outDir: '../resources/public',
    rollupOptions: {
      input: globSync(['index.html', 'dir1/**/*.html', 'dir2/**/*.html']).map(f => path.resolve(f)),
    },
  },

[panstromek]

I just bumped into this, it's really painful bug - it didn't trigger on CI (which is Linux), so I noticed it a long time after it was introduced in the codebase and took me few hours to figure out.

Is this a bug in Rollup or Vite?

If can't be easily fixed, I'd at least add note to docs (Vite or Rollup?), because it's easy to bump into it accidentaly.

[rse]

I got faced with this bug since Vite 5.1, too. It's not present in 5.0.12, but still exists in 5.2.8. I've traced it down to a bug in Vite which is related to path handling and manifests itself only under Windows filesystems. I've traced it down to

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

Line 816 in 102c2fd

chunk.facadeModuleId === id,

where the chunk.facadeModuleId is something like C:\Users\rse\xxx\index.html (the Windows path separation characters are in place) and the id is C:/Users/rse/xxx/index.html (where POSIX path separation characters are in place). As a result, the chunk is not found and hence the tags not emitted during the HTML generation. The workaround by using path.resolve() on the build.rollupOptions.input works, but it would be better if the comparison inside Vite is fixed. I propose to change chunk.facadeModuleId === id with chunk.facadeModuleId === normalizePath(id) to fix this nasty bug. For a little bit better performance, use const normalizedId = normalizePath(id) at the start of the loop and then twice us normalizeId in the loop (there is already a call to normalizePath(id) there).

[sapphi-red]

Closing as #16421 is merged.