@rollup/plugin-virtual does not work

[patak-dev]

Opening this issue as an enhancement following the relabelling of #1428

Is your feature request related to a problem? Please describe.

@rollup/plugin-virtual is currently not working. Checking the implementation, it looks like it may be workable.

I create a repro for this issue starting from the vanilla create app:
https://github.com/matias-capeletto/vite-rollup-plugin-virtual

It is using the example from the plugin docs (batman and robin are from there)
I am also using it with { enforce: 'pre', plugin } so it is applied before the rest of vite core plugins:

  plugins: [
    {
      enforce: 'pre', ...virtual({
        batman: `export default 'na na na na na'`,
        'src/robin.js': `export default 'batmannnnn'`
      })
    },
  ]

Additional context

It looks like there are two unrelated issues. Vite doesn't like the

import robin from "./robin.js";

$ vite build
building for production...
Could not resolve './robin.js' from main.js
error during build:
Error: Could not resolve './robin.js' from main.js

When removing this line, the other virtual file also fails. I think it is related to the prefix used by the plugin

const PREFIX = `\0virtual:`;

In Dev the error reads:

Uncaught TypeError: Failed to resolve module specifier "/@id/

During build it correctly compiles and runs through.

System Info

vite version: 2.0.0-beta.19
Operating System: Windows 10 Home, 10.0.18363 N/A Build 18363
Node version: v15.5.0
Package manager and version: yarn v1.22.10

[yyx990803]

Note: only the null byte needed to be fixed. The src/robin.js fails simply because robin.js isn't actually inside a src directory.

[patak-dev]

Sorry for that second non-issue, and thanks for the null byte fix 🙌🏼

Updated @rollup/plugin-virtual to compatible in http://vite-rollup-plugins.patak.dev

[kasec]

Im trying to use virtual plugin set it in vitejs.dev but i dont know how it have to works, I put that plugin in my vite.config.js

function myPlugin() {
	const virtualFileId = '@my-virtual-file'
  
	return {
	  name: 'my-plugin', // required, will show up in warnings and errors
	  resolveId(id) {
		console.log('resolveId', id);
		if (id === virtualFileId) {
		  return virtualFileId
		}
	  },
	  load(id) {
		if (id === virtualFileId) {
		  return `export const msg = "from virtual file"`
		}
	  }
	}
  }
export default {
	// build: { 
	// 	rollupOptions: {
	// 		input: 'entry'
	// 	}
	// },
	entry: 'src/main.js',
	plugins: [
		vuePlugin(),
		{
			enforce: 'pre',
			...myPlugin({
				batman: `export default 'na na na na na'`,
			})
		},
	]
}

Even I tried to set a different input like rollup docs, but does not works

Vite version: 2.0.0-beta.30

I dont know if I'm doing something wrong or if I dont understand how it would be working

[patak-dev]

@kasec, given that you commented in this issue, if you are trying to use @rollup/plugin-virtual, there are instructions for it in http://vite-rollup-plugins.patak.dev. There is no need to use enforce pre with it.
I updated the list to use 2.0.0-beta.30, and added a snippet for the app code usage of this plugin. Press the + in virtual to check it out.

The page is using this plugin, configured here, and the virtual files are used here.

But I see that you are defining your own plugin, following the example in Vite plugin docs. To use that particular example, you need to import msg from '@my-virtual-file' somewhere in your code and it should work. If it doesn't, please create a repro and open a new issue, as this would be unrelated to this one.

[kasec]

Ok, thank you buddy, I really misunderstood about how to implement it, and yesterday before my comment https://vite-rollup-plugins.patak.dev had not the implementation code in virtual-code.

Excellent job!