How do you actually reference files handled by this plugin?

[NullVoxPopuli]

For example, I have this code:

import { createRequire } from 'node:module';
import { viteStaticCopy } from 'vite-plugin-static-copy';

const require = createRequire(import.meta.url);

const packageName = '@pdftron/webviewer';
const pdfTronVersion = require('@pdftron/webviewer/package.json').version;

/**
 * NOTE: it's recommended to just use the public directory or an import in javascript.
 *       but pdfTron expects its own files to not be messed with by any build process.
 */
export const pdfTron = () => [
	viteStaticCopy({
		structured: true,
		targets: [
			{
				src: 'node_modules/@pdftron/webviewer/public/core',
				dest: `assets/webviewer/${pdfTronVersion}/core`,
			},
		],
	}),
	{
		name: 'ab:configure-pdf-tron',
		/**
		 * We don't want to import `@pdftron/webviewer` directly, because it's already been built for consuming.
		 * processing it again would slow down the build.
		 *
		 * If we were to accidentally process @pdftron/webviewer, we run in to an issue with the code they've provided us.
		 * "return" is not valid outside a function.
		 */
		configResolved(config) {
			config.optimizeDeps ||= {};
			config.optimizeDeps.exclude ||= [];

			if (!config.optimizeDeps.exclude.includes(packageName)) {
				config.optimizeDeps.exclude.push(packageName);
			}
		},
	},
];

and

plugins: [
  pdfTron(),
]

and then this in my browser/runtime code:

		const coreURL = new URL('/assets/webviewer/10.10.1/core/webviewer-core.min.js?url', import.meta.url).href;
		const pdfNetURL = new URL('/assets/webviewer/10.10.1/core/pdf/PDFNet.js?url', import.meta.url).href;
		const core = document.createElement('script');
		const pdfnet = document.createElement('script');

		let coreResolve;
		let pdfnetResolve;

		const promises = Promise.all([
			new Promise((resolve) => {
				coreResolve = resolve;
			}),
			new Promise((resolve) => {
				pdfnetResolve = resolve;
			}),
		]);
		Object.assign(core, { src: coreURL, onload: coreResolve });
		Object.assign(pdfnet, { src: coreURL, onload: pdfnetResolve });
		core.src = coreURL;
		pdfnet.src = pdfNetURL;

		document.head.appendChild(core);
		document.head.appendChild(pdfnet);

		await promises;

yet,
I get these errors:

 GET https://localhost:5173/@fs/assets/webviewer/10.10.1/core/webviewer-core.min.js?url net::ERR_ABORTED 404 (Not Found)
 GET https://localhost:5173/@fs/assets/webviewer/10.10.1/core/pdf/PDFNet.js?url net::ERR_ABORTED 404 (Not Found)

I suspect that the way I constructed the URL is incorrect, as it starts with @fs/, which should be my drive root? ya? not the root of my output directory?

[sapphi-red]

The referenced paths were wrong. Because structured: true keep the structure, the files are placed under /assets/webviewer/${version}/core/node_modules/@pdftron/webviewer/public/core/.
https://stackblitz.com/edit/vitejs-vite-wtmrbftm?file=vite.config.js,src%2Fmain.js&terminal=dev

[NullVoxPopuli]

I'm seeing some weird behavior in my bigger app. I've been unable to reproduce the issue locally in a tiny / new vite project, which is a bit frustrating.

But it seems no matter what I do, the files aren't found at dev-time.
I do confirm that a build puts the files in the correct spot.

I also noticed that the middleware handler isn't used (I placed a breakpoint).

I was not able to determine why the middleware handler wasn't getting called, even though i was able to confirm it's installed.

Is it possible plugin order matters maybe?

[sapphi-red]

I guess other middleware is handling the request. Running vite with DEBUG=connect:dispatcher may help.
This plugin doesn't rely on the plugin order. If there's a plugin that does weird things, this part of code may break and could lead to that situation though.

vite-plugin-static-copy/src/serve.ts

Lines 124 to 146 in ff6630c

	// insert serveStaticCopyMiddleware before viteServePublicMiddleware
	// if viteServePublicMiddleware didn't exist use transformMiddleware instead
	middlewares.use(serveStaticCopyMiddleware(config, fileMap))
	const targetMiddlewareIndex = findMiddlewareIndex(middlewares.stack, [
	'viteServePublicMiddleware',
	'viteTransformMiddleware',
	])
	const serveStaticCopyMiddlewareIndex = findMiddlewareIndex(
	middlewares.stack,
	'viteServeStaticCopyMiddleware',
	)
	const serveStaticCopyMiddlewareItem = middlewares.stack.splice(
	serveStaticCopyMiddlewareIndex,
	1,
	)[0]
	if (serveStaticCopyMiddlewareItem === undefined) throw new Error()
	middlewares.stack.splice(
	targetMiddlewareIndex,
	0,
	serveStaticCopyMiddlewareItem,
	)

[NullVoxPopuli]

ah-ha -- found the issue -- vite-plugin-static-copy was the other problem: https://stackblitz.com/edit/vitejs-vite-3cvj1uly?file=vite.config.js,package.json&file=src%2Fmain.js&terminal=dev

having multiple of them causes conflicts with the other vite-plugin-static-copy instances.

this means that plugins using nested plugins can't use vite-plugin-static-copy because it would conflict with the host's usage of vite-plugin-static-copy or other plugins also using vite-plugin-static-copy

[sapphi-red]

Ah, I see. Fixed in #186

[NullVoxPopuli]

excellent! thank you!!!