(@roots/bud-vue) Module not found: Can't resolve 'vue/server-renderer'

bud
, ,
1

I’m working on an SSR Vue POC and since Bud is the only builder that works fine with Sage10, I’m giving it a try.

Given the following setup:

// bud.config.ts

import type { Bud } from '@roots/bud'

export default function (bud: Bud) {
  bud.entry({
    // vue: ['vue', 'vue/server-renderer'], // this is something is tried but didn't work
    'entry.server': ['./resources/vue/entry.server.js'],
  }).webpackConfig(config => {
    config.output.globalObject = 'this'

    return config
  })
};

// entry.server.js

import { renderToString } from 'vue/server-renderer'
import { createApp } from './app';

const { app, store } = createApp()

store.commit('ssr/setContext', context)

renderToString(app).then(html => {
  console.log(html);
})

This is the error I’m receiving:

ModuleNotFoundError: Module not found: Error: Can't resolve 'vue/server-renderer' in '[secure]/resources/vue'

Now, I believe the issue resides in the @roots/bud-vue extension, because if I comment the vue aliasing line, it builds successfully. (See below close to the file end).

// web/app/themes/main/node_modules/@roots/bud-vue/lib/cjs/vue.extension.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VueExtension = void 0;
const vue_loader_1 = require("vue-loader");
/**
 * @public
 */
exports.VueExtension = {
    name: '@roots/bud-vue',
    boot: async (app) => {
        await app.extensions.add({
            name: 'vue-loader-plugin',
            make: () => new vue_loader_1.VueLoaderPlugin(),
        });
        app.build
            .setLoader('vue', require.resolve('vue-loader'))
            .setItem('vue', item => item.setLoader('vue'))
            .setLoader('vue-style', require.resolve('vue-style-loader'))
            .setItem('vue-style', item => item.setLoader('vue-style'));
        app.build.rules.css.setUse(items => [`vue-style`, ...items]);
        app.hooks.on('build.module.rules.before', rules => [
            app.build
                .makeRule()
                .setTest(app.store.get('patterns.vue'))
                .setUse(items => [`vue`, ...items])
                .toWebpack(),
            ...rules,
        ]);
        app.hooks.on('build.resolve.extensions', ext => ext.add('.vue'));
        app.hooks.async('build.resolve.alias', async (aliases) => ({
            ...(aliases ?? {}),
            vue: '@vue/runtime-dom', // THIS LINE 
        }));
    },
};