Vite legacy plugin doesn't work

[catgirlinspace]

Hi! I'm trying to use Vike with HTML-only rendering and some +client.js files along with the vite legacy plugin. I've tried html-only, ssr, and client-only (in the renderer/config.js file) and there's never a legacy script tag included. I've seen a few other discussions about the legacy plugin, but couldn't really find any useful information. I've read all of issue #1154 and even when using the latest Vike version with the https://github.com/brillout/repro-vike-vite-plugin-legacy repo it didn't output any legacy script tags. I'm really not sure what to do--my project is pretty much the default from running bati and then changing it to add the legacy plugin and html-only mode.

renderer/+config.ts:

export default {
	meta: {
		Page: {
			env: { server: true, client: false } // HTML-only for all pages
		}
	}
}

vite.config.ts:

import md from "unplugin-vue-markdown/vite";
import vue from "@vitejs/plugin-vue";
import ssr from "vike/plugin";
import {defineConfig} from "vite";
import legacy from "@vitejs/plugin-legacy";

export default defineConfig({
	plugins: [
		legacy({
			targets: ['defaults', 'iOS 5'],
		}),
		ssr(),
		vue({
			include: [/\.vue$/, /\.md$/],
		}),
		md({}),
	],
});```

[brillout]

The best would be to have an example of how to setup Vike + the legacy plugin. I ain't that familiar with the legacy plugin, but let me know if you believe there is something about Vike that is blocking. Keep us updated about your findings.

CC @lukastaegert

[catgirlinspace]

An example setup would be awesome, yeah.

Haven't made any progress in finding what's causing there to be no legacy script tags :( I've tried using some older versions of the legacy plugin too with no luck. I did see another issue from a while ago used prerendering, but running vike prerender didn't work :( (prerendering doesn't work for my use case anyways, but thought I should try it anyways)

[brillout]

As explained at #224, HTML transformers aren't applied. Can you create a minimal reproduction? I've an idea.

[catgirlinspace]

Made a repro here. For testing this I've just been doing running build and then server:prod. https://github.com/catgirlinspace/vike-legacy-repro

[brillout]

I'm busy with a complex highest-prio ticket atm. I'll have a look at this beginning of next week, but let me know if it's rather urgent for you.

[catgirlinspace]

No worries! It's not urgent at all, just trying to make a website that runs on the Wii U internet browser which is like, really old WebKit and doesn't support es modules lol

[pool611]

I use vike(0.4.168)+vite(4.4.9)+@vitejs/plugin-legacy(4.1.1) to build SSR project, and it contain legacy files like

dist/client/assets/chunks/chunk-xxx-legacy.js
dist/client/assets/entries/xx_pages.xxx-legacy.js
dist/client/assets/polyfills.xxx-legacy.js

SSR Project don't generate html file, so @vitejs/plugin-legacy do not inject nomodule script into it. Could I need replace body from server/index.js ? Is there any better way to do?🤔

import express from 'express'
...
app.get('*', async (req, res, next) => {
   ...
   res.send(body) // body.replace() to add nomodule script ?
})

[brillout]

Yes, I think/guess that's what users do at the moment.

Can you publish a working example? That would be great for other users like @catgirlinspace.

I've an idea for automatically adding the legacy scripts, which I'll take a stab at after I finish the two higest-priority features I'm currently working on.

[pool611]

This is a simple example: https://github.com/pool611/vike-legacy-repro, and it has a sample README to introduce how to create it.
Thank you very much for your help in solving this problem.

[brillout]

Also: #1643.