Problema with InertiaJS SSR & Vite

After upgrading to L10 and Vite, I can't run the SSR. I get this error after run inertia:start-ssr

file:///Users/luisma/code/rdb/bootstrap/ssr/ssr.mjs:6
import { throttle } from "lodash";
         ^^^^^^^^
SyntaxError: Named export 'throttle' not found. The requested module 'lodash' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:    

import pkg from 'lodash';
const { throttle } = pkg;    

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)    

Node.js v19.6.0

This is my vite.config.js

import fs from 'fs';
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import {homedir} from 'os'
import {resolve} from 'path'

const host = 'rdb.test';

export default defineConfig({
    server: detectServerConfig(host),
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            ssr: 'resources/js/ssr.js',
            refresh: true,
            valetTls: 'rdb.test',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    optimizeDeps: {
        include: [
          'lodash.throttle'
        ]
    },
    resolve: {
        alias: {
            '@': '/resources/js'
        }
    },
});

function detectServerConfig(host) {
    let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`)
    let certificatePath = resolve(homedir(), `.config/valet/Certificates/${host}.crt`)

    if (!fs.existsSync(keyPath)) {
        return {}
    }

    if (!fs.existsSync(certificatePath)) {
        return {}
    }

    return {
        hmr: {host},
        host,
        https: {
            key: fs.readFileSync(keyPath),
            cert: fs.readFileSync(certificatePath),
        },
    }
}

Any idea?

jseitel

3 years ago

Best Answer

Level 4

Hi @luismabenitez, after hitting a similar problem with a different package, I managed to figure it out. It turns out that vite doesn't support CommonJS modules out of box (supposedly as a way of motivating the community to move to ESM).

I had to add the offending package to ssr.noExternal in my vite.config.ts in order to get it to work. Here's how it looks after the change:

export default defineConfig({
  server: {
    hmr: {
      host: 'localhost',
    },
  },
  plugins: [
    laravel({
      input: 'resources/js/app.tsx',
      ssr: 'resources/js/ssr.tsx',
      refresh: true,
    }),
    react(),
  ],
  resolve: {
    alias: {
      '@': '/resources/js',
    },
  },
  ssr: {
    noExternal: ['@inertiajs/server', 'react-lazy-load-image-component'],
  },
});

Hope that helps!

4 likes

jackkitley

1 year ago

Level 1

@jseitel thank you. this solved another ssr issue that i was having

tuliogerbassi

1 year ago

Level 1

@jseitel thanks I was stuck with this one

robgoodliffe

2 years ago

Level 9

alternatively try changing

import pkg from 'lodash'; to import * as pkg from 'lodash';

Please or to participate in this conversation.