Level 63
vue/server-renderer exists in the node_modules folder.
As suggested by the AI, I have installed @vue/server-renderer, but nothing changes, I get the same error.
Mar 25, 2026
4
Level 63
Setup SSR
Hello,
I have this problem with this import.
import { renderToString } from 'vue/server-renderer'
✗ Build failed in 335ms
error during build:
Build failed with 1 error:
[plugin vite-plugin-pwa:build]
Error: Build failed with 1 error:
[UNLOADABLE_DEPENDENCY] Error: Could not load vue/dist/vue.esm-bundler.js/server-renderer
╭─[ resources/js/ssr.js:48:32 ]
│
48 │ import { renderToString } from 'vue/server-renderer';
│ ──────────┬──────────
│ ╰──────────── No such file or directory (os error 2)
────╯
at aggregateBindingErrorsIntoJsError (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/rolldown/dist/shared/error-BO4SlZV_.mjs:48:18)
at plugin (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/rolldown/dist/shared/bindingify-input-options-DoaqRULI.mjs:1006:61)
at plugin.<computed> (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/rolldown/dist/shared/bindingify-input-options-DoaqRULI.mjs:1575:18)
at aggregateBindingErrorsIntoJsError (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/rolldown/dist/shared/error-BO4SlZV_.mjs:48:18)
at unwrapBindingResult (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/rolldown/dist/shared/error-BO4SlZV_.mjs:18:128)
at #build (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/rolldown/dist/shared/rolldown-build-yQC7KN8K.mjs:3311:34)
at async buildEnvironment (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/vite/dist/node/chunks/node.js:32817:64)
at async Object.build (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/vite/dist/node/chunks/node.js:33239:19)
at async Object.buildApp (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/vite/dist/node/chunks/node.js:33236:153)
at async CAC.<anonymous> (file:///home/vincent/Documents/PRO/DEV/PERSO/MPA/mpa/node_modules/vite/dist/node/cli.js:778:3) {
errors: [Getter/Setter]
}
So a problem with the PWA configuration.
It's the first time I try to setup SSR and I'm not so good at solving NodeJS problems.
Any help ?
Thanks.
V
Level 11
renderToString is supposed to be imported from vue/server-renderer for Vue SSR, so the import itself is valid. Vite’s SSR guide also expects a separate server entry for SSR, and Vue’s SSR docs describe renderToString() as the standard server-side API.
What looks suspicious
Could not load vue/dist/vue.esm-bundler.js/server-renderer
That path is wrong. It means something in the build pipeline is effectively trying to resolve server-renderer relative to the main vue package file, instead of treating vue/server-renderer as its own subpath export. Since your stack trace points to [plugin vite-plugin-pwa:build] and Rolldown, the likely issue is that the PWA plugin is participating in the SSR build and mishandling that subpath import. Vite also notes that SSR and client builds may need special conditions in one shared config, via the ssrBuild flag, and Rolldown integration is still something Vite describes as an active migration area.
I would not focus on reinstalling @vue/server-renderer again. I would focus on preventing the PWA plugin from affecting the SSR build.
A good first fix is to apply VitePWA() only for the client build:
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig(({ ssrBuild }) => ({
plugins: [
vue(),
!ssrBuild &&
VitePWA({
// your current PWA options
}),
].filter(Boolean),
}))
That is the cleanest direction because Vite explicitly supports conditional config based on SSR vs client build.
Also make sure your SSR import lives only in your server entry (ssr.js, entry-server.js, etc.) and is not pulled into browser-only code. Vite’s SSR guide recommends a structure with separate client and server entry files precisely for this reason.
If you are also registering the PWA runtime inside app code, keep that client-only as well. The Vite PWA docs explicitly warn that SSR/SSG builds run server-side too, and code that is not SSR-aware must be dynamically imported or delayed until window exists.
If you dont mind pasting your vite.config. if you want, i suspect that is probably where the real issue is.
1 like
Level 63
Thank you for all these explanations.
Hmmm ... yes I prefer to show you the Vite configuration file.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
ssr: 'resources/js/ssr.js',
refresh: true,
}),
tailwindcss(),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
VitePWA({
buildBase: '/build/',
scope: '/',
base: '/',
registerType: 'autoUpdate',
devOptions: {
enabled: false,
},
injectRegister: 'auto',
includeAssets: [],
manifest: {
name: 'Les Meeples Perdus d\'Aurillac',
short_name: 'MPA',
start_url: '/',
scope: '/',
background_color: '#ffffff',
theme_color: '#ffffff',
display: 'standalone',
orientation: 'any',
status_bar: '#ffffff',
icons: [
{
src: '/pwa/icon-72x72.png',
sizes: '72x72',
type: 'image/png',
},
{
src: '/pwa/icon-96x96.png',
sizes: '96x96',
type: 'image/png',
},
{
src: '/pwa/icon-128x128.png',
sizes: '128x128',
type: 'image/png',
},
{
src: '/pwa/icon-144x144.png',
sizes: '144x144',
type: 'image/png',
},
{
src: '/pwa/icon-152x152.png',
sizes: '152x152',
type: 'image/png',
},
{
src: '/pwa/icon-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/pwa/icon-384x384.png',
sizes: '384x384',
type: 'image/png',
},
{
src: '/pwa/icon-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
// // 'splash' => [
// // '640x1136' => '/pwa/splash-640x1136.png',
// // '750x1334' => '/pwa/splash-750x1334.png',
// // '828x1792' => '/pwa/splash-828x1792.png',
// // '1125x2436' => '/pwa/splash-1125x2436.png',
// // '1242x2208' => '/pwa/splash-1242x2208.png',
// // '1242x2688' => '/pwa/splash-1242x2688.png',
// // '1536x2048' => '/pwa/splash-1536x2048.png',
// // '1668x2224' => '/pwa/splash-1668x2224.png',
// // '1668x2388' => '/pwa/splash-1668x2388.png',
// // '2048x2732' => '/pwa/splash-2048x2732.png',
// // ],
},
workbox: {
globPatterns: ["**/*.{js,css,html,ico,png,svg,webmanifest}"],
runtimeCaching: [
{
urlPattern: ({ request }) => request.destination === 'style' || request.destination === 'script' || request.destination === 'worker',
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'static-resources',
expiration: {
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
},
},
},
{
urlPattern: ({ request }) => request.destination === 'image',
handler: 'CacheFirst',
options: {
cacheName: 'images',
expiration: {
maxEntries: 100,
maxAgeSeconds: 60 * 24 * 60 * 60, // 60 days
},
},
},
],
},
}),
],
resolve: {
alias: {
'@': '/resources/js',
'@img': '/resources/img',
'vue': 'vue/dist/vue.esm-bundler.js'
},
},
});
Level 63
Just solved ... it came from this alias.
'vue': 'vue/dist/vue.esm-bundler.js'
I deleted it and the build works fine.
1 like
Please or to participate in this conversation.