Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

dnellis's avatar

Issues with Vite and Node Modules

I need some help troubleshooting and issue I am having with Inertia and Vite.

I set up a new project with Inertia and Vite following the instructions in this guide. Everything was going smoothly until I tried importing a node module, Vue Markdown, into one of my Vue components.

When I add the import and add the VueMarkdown component to my component list, Vite throws an error: Vite Error, /node_modules/.vite/deps/vue-markdown.js?v=50c8d340 optimized info should be defined

I tried looking for some answers online, but didn't find a ton of helpful info. One thing I tried was to add:

optimizeDeps: {
        exclude: ["vue-markdown"],
    },

to my vite.config.ts.

After adding that change, I no longer get the error from Vite, but instead get an error in the browser console: Uncaught (in promise) SyntaxError: The requested module '/node_modules/vue-markdown/dist/vue-markdown.common.js?v=952cd7a5' does not provide an export named 'default'

I looked in the file that the error is referencing, and there is indeed a exports.default, so I'm not sure what's going on.

I'm about ready to start over using Webpack instead of Vite, but I thought I'd see if anyone here can help me first.

0 likes
4 replies
dnellis's avatar

@drehimself Thanks for that information! That is very helpful.

I wasn't very aware of this compatibility issue. I can do some research myself, but do you have any insight into how typical this is? Do you have experience with this stack (Laravel, Vite, Inertia, Vue3). If so, could you speak to the pros and cons of using this stack versus a similar stack with Webpack?

I am now trying to decide if I should move forward with Vite and use different packages, or start over with Webpack to avoid such issues moving forward.

drehimself's avatar
Level 35

@dnellis Since Vite is fairly new, I don't have much experience using it within a production app.

I've also only played around with the Laravel Vite package, although my impressions are very good as it seems very polished and well documented. I'm under the impression that the Laravel team plans to make an official package for Laravel and Vite sometime real soon: https://twitter.com/taylorotwell/status/1521506882686443520.

It's a tradeoff between wanting what's cutting edge, or sticking with what's safe. Vite's best feature IMO is its speed of server starts and also hot module replacement. If your Inertia app gets somewhat large, compiling all those components can take some time and can potentially start to slow doing if using webpack. With Vite, it shouldn't be a problem.

However, like you've discovered, not all plugins are currently compatible with Vite. Within the Vue community, the last few years have been dedicated to making most things compatible with Vite, and moving away from webpack. A lot of progress has been made to the point where I'm comfortable using Vite over webpack within Vue 3 apps.

TLDR: If you want what's safe, stick with Laravel Mix and webpack. If you want to be on the cutting edge, go ahead and use Vite. Even if the Laravel team releases a Vite package soon, I would imagine that moving from the (unofficial) Laravel Vite package to the official one shouldn't be too difficult.

Please or to participate in this conversation.