Does not support Vite plugin virtual modules - Breaks Vue DevTools Vite plugin

Unnoen commented 8 months ago

Vite Plugin Version

1.0.1

Laravel Version

10.40

Node Version

20.10.0

NPM Version

10.2.3

Operating System

Windows (WSL)

OS Version

22631.3155

Web browser and version

1.64.74 Chromium: 122.0.6261.43 (Official Build) beta (64-bit)

Running in Sail?

Custom Docker

Description

Using the Laravel Vite plugin causes the Vue DevTools Vite plugin to be unable to access its virtual module.

Manually going to the URLs in the errors above causes a 404, both on the web app's localhost, and Vite's server port (http://localhost:5174/@id/virtual:vue-devtools-path:overlay/devtools-overlay.css)

Vite Virtual Module documentation: https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention Vue DevTools: https://devtools-next.vuejs.org/

Steps To Reproduce

Install both laravel-vite-plugin and vite-plugin-vue-devtools
Configure VueDevTools's appendTo option in Vite plugin config (i.e., VueDevTools({ appendTo: 'resources/js/vue.js' }))
- As Laravel Vite doesn't have a HTML entry point, this is required for the DevTools to be mounted.
Run Vite's serve command.
Visit a page in your app.

jessarcher commented 8 months ago

Hi @Unnoen,

I think a few things are going on here:

The module is requested from the Laravel web server rather than the Vite dev server. I've tried configuring the clientHost option to http://localhost:5173, but that doesn't seem to change anything. I'm not sure that there's anything we can do (or are doing) to impact this, and it probably needs to be addressed in vite-plugin-vue-devtools.
Assuming the above was fixed, when trying to load the files from the Vite dev server, our index page is displayed instead of the module js/css:

We've configured this plugin to only return that page when trying to load /index.html, so I'm assuming 404s also try to load /index.html. I have tried completely removing our code for this, but the URL returns an empty response.

I have also tried completely removing the Laravel plugin, and I still can't get the module code to be returned from that URL.

Ultimately, I don't think there's anything we're doing that's causing this issue. It probably won't work for anyone using Vite's backend integration. I'm also not aware of anything we could do to solve this on our end.

I suspect the plugin authors would recommend using "standalone mode" in this scenario - https://devtools-next.vuejs.org/guide/standalone.

Happy to re-open this if there is something specifically we can add on our end.

Unnoen commented 8 months ago

@jessarcher Thank you for responding and investigating so quickly, I really appreciate it. Especially after looking back at this, I apologise for not giving more context.

I spent a little time looking into it further and I can conclude that it is indeed an issue with Vue DevTools that Laravel Vite unfortunately seems to trigger (but is not at fault), sorry for blaming you 😅

I was able to use Yarn patch to patch vite-plugin-vue-devtools and get it working. I'll be creating an issue with Vue DevTools, but until then, I put my process below.

In node_modules/vite-plugin-vue-devtools/dist/vite.mjs I modified the async load(id) method:

async load(id) {
  if (id === "virtual:vue-devtools-options")
  return `export default ${JSON.stringify({ base: config.base, clientHost: pluginOptions.clientHost, componentInspector: pluginOptions.componentInspector })}`;
},

To (adding pluginOptions.base ??):

async load(id) {
  if (id === "virtual:vue-devtools-options")
  return `export default ${JSON.stringify({ base: pluginOptions.base ?? config.base, clientHost: pluginOptions.clientHost, componentInspector: pluginOptions.componentInspector })}`;
},

Then in the Vite config file, adding base: 'http://localhost:5173/' to VueDevTools' options.

jessarcher commented 8 months ago

Nice! Thanks for following up! :slightly_smiling_face:

laravel / vite-plugin