🐛 BUG: Vite plugins not applied in production (only in dev)

[tkon99]

What version of astro are you using?

0.21.4

What package manager are you using?

npm

What operating system are you using?

Windows (reproduced in Linux)

Describe the Bug

When using a Vite plugin to transform page HTML the result is as expected when using the dev server (astro dev), but building the page (astro build) results in Vite plugins not being applied.

To reproduce: example below, after observing the automatically started dev server (correctly processing the HTML), stop the dev server, build the project, and inspect the generated HTML.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-5hwrzj-w68pe3?devtoolsheight=33&file=astro.config.mjs

[matthewp]

The transformIndexHtml hook is specific to a SPA workflow within Vite where you have a literal index.html file. The fact that this hook runs in dev is because we use it internally in Astro to resolve module specifiers. This is an internal implementation detail and should not be relied upon.

It's very likely we'll stop using this transformation in the future as we move to SSR where we can't rely on Vite doing HTML preprocessing.

[jrencz]

In case some one, like me, finds this issue: If I'm correct there's no way to apply code injections with such ease as transformIndexHtml allows into statically built html files. At the same time what's generated is named index.html so one may be tempted to go that way (at least I was).

My use case: I tried to inject scripts at the bottom of the page. Astro allows injection as described by type

astro/packages/astro/src/@types/astro.ts

Line 935 in ae41f25

export type InjectedScriptStage = 'before-hydration' | 'head-inline' | 'page' | 'page-ssr';

but that's not fine for my use case, where I need to inject at the bottom, but opt-out of any transformations.

Right now it's like shown:

astro/packages/astro/src/core/build/generate.ts

Lines 382 to 393 in 4b18813

	const response = await renderPage(mod, ctx, env);
	throwIfRedirectNotAllowed(response, opts.settings.config);
	// If there's no body, do nothing
	if (!response.body) return;
	body = await response.text();
	}
	const outFolder = getOutFolder(settings.config, pathname, pageData.route.type);
	const outFile = getOutFile(settings.config, outFolder, pathname, pageData.route.type);
	pageData.route.distURL = outFile;
	await fs.promises.mkdir(outFolder, { recursive: true });
	await fs.promises.writeFile(outFile, body, encoding ?? 'utf-8');

and there's no api to alter generated html files

[findlay-best-wishes]

The transformIndexHtml hook is specific to a SPA workflow within Vite where you have a literal index.html file. The fact that this hook runs in dev is because we use it internally in Astro to resolve module specifiers. This is an internal implementation detail and should not be relied upon.

It's very likely we'll stop using this transformation in the future as we move to SSR where we can't rely on Vite doing HTML preprocessing.

Does the transformIndexHtml hook has been stopped using?

[yoyo837]

If vite's transformIndexHtml is not supported in ssg, then what should we do when we want to modify the html build?

[yoyo837]

rollup's generateBundle was found to be unsupported as well.