Vite plugin transformIndexHtml does not work

[iloveitaly]

I'm using React Router as a...

framework

Reproduction

Lifted from this Discord discussion.

const HTML_PLUGIN_TEST = {
  name: "html-plugin-test",

  transformIndexHtml(html) {
    return {
      tag: "script",
      children: "alert('hello world')",
    }
  },
}

export default defineConfig(({ mode }) => ({
  plugins: [reactRouter(), tsconfigPaths(), HTML_PLUGIN_TEST],
}))

The transformIndexHtml is never called. This means a whole set of vite plugins will not work without any error message.

I understand there's a good reason why this vite plugin method cannot work with RR, but it should at least throw an error or warning to let the user know the plugin they installed will not work at all.

System Info

System:
    OS: macOS 15.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 8.85 GB / 96.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.local/share/mise/installs/node/22.11.0/bin/node
    npm: 10.9.0 - ~/.local/share/mise/installs/node/22.11.0/bin/npm
    pnpm: 9.15.3 - ~/.local/share/mise/installs/pnpm/9.15.3/bin/pnpm
    bun: 1.1.33 - ~/.local/share/mise/installs/bun/1.1.33/bin/bun
  Browsers:
    Chrome: 131.0.6778.265
    Chrome Canary: 134.0.6956.0
    Safari: 18.2
    Safari Technology Preview: 18.2

Used Package Manager

npm

Expected Behavior

Allow vite plugins to transform the index HTML.

An alternative here would be writing our own shim using buildEnd:

export default {
  ssr: false,
  buildDirectory: "build/" + process.env.NODE_ENV,
  async buildEnd(args) {
    // if (!args.viteConfig.isProduction) return

    const log = args.viteConfig.logger

    // this plugin list is already filtered by each plugin's `apply` and is not the raw plugin
    // list specified on
    const pluginList = args.viteConfig.plugins

    // first, let's find all plugins which implement transformIndexHtml
    const plugins = pluginList.filter(
      (plugin) => "transformIndexHtml" in plugin,
    )

    if (plugins.length === 0) {
      log.error("No plugins found which implement transformIndexHtml")
      return
    }

    // now let's run their transformation command
    const indexHTMLPath = args.viteConfig.build.outDir + "/index.html"

    for (const plugin of plugins) {
      log.info(`Running transformIndexHtml for ${plugin.name}`)
      await transformHtmlWithPlugin(indexHTMLPath, plugin)
    }
  },
} satisfies Config

but this doesn't work since buildEnd is not called in preview mode.

Actual Behavior

The index HTML is not transformed.

[timdorr]

This is related to #12352, since our plugin is overriding that subsequent plugin and doesn't allow for options to be able to inject your own plugin functionality into it.