Vite Build for Production Yields Vue Not Found

[secondmanveran]

I've built up my SSR config and it runs locally, I see the ssr rendering inside the #app element.

But when I build this ssr.js file in Github Actions, then send it to Forge, it won't run.

Error thrown:

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'vue'
Require stack:
- /home/forge/example.com/public/render/ssr.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/forge/example.com/public/render/ssr.js:21:11)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/forge/example.com/public/render/ssr.js' ]
}

How do I alias vue in my ssr config when there's no node_modules dir on the production server? Or do I just not alias anything?

My vite.ssr.config.js looks like so:

const dotenv = require('dotenv')
const expandDotenv = require('dotenv-expand')

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'

const env = expandDotenv.expand(dotenv.config()).parsed

export default defineConfig(() => ({
  publicDir: false,
  build: {
    ssr: true,
    target: 'node17',
    outDir: 'public/render',
    rollupOptions: {
      input: 'resources/js/ssr.js',
    },
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'resources/js'),
      '/storage': resolve(__dirname, 'storage/app/public'),
      vue: resolve(__dirname, 'node_modules/vue/index.js'),
      ziggy: resolve(__dirname, 'vendor/tightenco/ziggy/dist/index.es.js'),
      zora: resolve(__dirname, 'vendor/serenity/zora/dist/ssr.js'),
      composable: resolve(__dirname, 'resources/js/Composable/index.js'),
    },
  },
  plugins: [
    vue(),
    AutoImport({
      include: [
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      imports: [
        'vue',
        'vuex',
        {
          '@inertiajs/inertia': ['Inertia'],
          '@inertiajs/inertia-vue3': ['useForm', 'usePage', 'useRemember'],
          composable: ['useTrans', 'useRoutes'],
        },
      ],
    }),
    Components({
      dirs: ['resources/js/Components'],
      extensions: ['vue'],
      deep: true,
      resolvers: [],
      dts: false,
      directoryAsNamespace: false,
      globalNamespaces: [],
      directives: true,
      include: [/\.vue$/, /\.vue\?vue/],
      exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
    }),
  ],
}))

As I said, this configuration works perfectly on my local machine, where all my versions match production.

Local:

Mac osMonterey 12.1 Laravel Valet using PHP 8.1.1 Node 16.13.2 Npm 8.1.2

Remote:

Ubuntu 20.04.3 LTS (GNU/Linux 5.4.0-96-generic x86_64) PHP: 8.1.1 Node: 16.13.2 Npm: 8.1.2

Need some assistance.

[secondmanveran]

@claudiodekker

Any chance I can get some feedback on this?

Thanks