[Bug]: Missing/no images using vite-imagetools in dev mode

[jaroel]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Running pnpm run dev results in no images (w/ vite-imagetools).
Running pnpm run build results in a beautiful page with nicely resized images :)

Expected behavior 🤔

I'd like to see images when running pnpm run dev too please :)

Steps to reproduce 🕹

Steps:

1. clone https://github.com/jaroel/solid-start-imagetools
2. pnpm install && pnpm run dev
3. load / and see something like the following image:

Context 🔦

I want to resize images when building the website.

Your environment 🌎

Macos
node v20.9.0

[brenelz]

I think this is a related pr that needs to be ported to vinxi

https://github.com/nuxt/framework/pull/9602/files.

This seems to fix it:

const viteServer = await createViteHandler(router, app, serveConfig);
const handler = eventHandler(async (event) => {
	const originalURL = event.node.req.url;
	let base = join(app.config.server.baseURL ?? "/", router.base);
	// @ts-expect-error _skip_transform is a private property
	event.node.req._skip_transform = !originalURL.startsWith(base);

	const { default: handler } = await viteServer.ssrLoadModule(
		handlerModule(router),
	);
	return handler(event);
});

[nksaraf]

can you make a PR for this in vinxi? we should include this if it fixes things

[brenelz]

Alright i created a pr that seems to fix things. I am just unsure of any other negative affects

[nksaraf]

Released a new version of vinxi (0.0.61) that fixes this. Give it a try (use this package.json).

{
  "name": "snuk",
  "type": "module",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start"
  },
  "dependencies": {
    "@solidjs/meta": "^0.29.2",
    "@solidjs/router": "^0.10.5",
    "@solidjs/start": "^0.4.2",
    "@vinxi/server-functions": "0.0.58",
    "solid-js": "^1.8.7",
    "vinxi": "0.0.61"
  },
  "engines": {
    "node": ">=18"
  },
  "devDependencies": {
    "vite-imagetools": "^6.2.8"
  },
  "pnpm": {
    "overrides": {
      "@vinxi/server-functions": "0.0.58"
    }
  }
}

[jaroel]

This works for me, thank both! FYI: I didn't need to use the pnpm overrides block.