Search code examples
vue.jsbuildviteassetsmulti-page-application

Combination of latest versions of vite, vue, @vitejs/plugin-vue and vite-plugin-virtual-mpa is not including asset urls in build output


Problem

In Brief

In my current project with old libraries, I am having '1 high severity vulnerability' as can be seen with 'npm audit'. So I want to update the libraries to latest verions. But updating them breaks my build.

+ Detail

I am building a multi-page Vue project with Vite by using a Multi-page-plugin: vite-plugin-virtual-mpa and vite-vue plugin: @vitejs/plugin-vue. But after the build, the generated html files are not having links to generated asset files. Have a look at images below.

How it should be: Code with proper asset urls

How it is: Code without asset urls

( I made a minimum reproducible version of the project. https://github.com/shivamrawal19/testmpa It has both old and new version of package.json & package-lock.json files, so you can test it in both cases. )

What I've tried

  • I tried to update packages one by one to see, when the issue is coming, but no matter which library I update first, it fails.

    • I found out that even if I run npm install on just old package.json ( i.e. without old package-lock.json ) it is generating wrong package-lock.json file which inturn generates wrong node_modules and wrong npm run build.
    • So only if I use both old package.json and old package-lock.json and then run npm install then only it works. So the old package-lock.json is somehow built properly.

I am not sure about which package is causing error so I am posting this on StackOverflow, instead of respective package's github issues page.

I think the issue is with some library as my code seems quite simple and bug-free to me, but do correct me if that's not the case.


Solution

  • The issue was in the Vite package. They solved it in the new update. See here for more info: https://github.com/vitejs/vite/issues/15992