启用InertiaJS SSR时PrimeVue模块导入错误求助

问题重现 #

执行php artisan inertia:start-ssr启动Inertia SSR服务时，触发以下错误：

(node:12588) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
C:\xampp\htdocs\test\node_modules\primevue\config\config.esm.js:1
import { FilterMatchMode } from 'primevue/api';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Node.js v20.10.0

已尝试修改导入扩展名、改用require语法、将文件改为.mjs格式，但问题未解决。

解决方案 #

方案1：自定义SSR启动命令，强制Node以ES模块模式运行 #

1. 在项目根目录的package.json中添加自定义SSR启动脚本：

{
  "scripts": {
    // ... 原有脚本
    "ssr:start": "node --input-type=module public/build/ssr.js"
  }
}

2. 修改Laravel的config/inertia.php配置文件，指定使用自定义启动命令：

return [
    // ... 其他配置
    'ssr' => [
        'enabled' => true,
        'url' => 'http://127.0.0.1:13714',
        'command' => 'npm run ssr:start',
    ],
];

方案2：调整Vite配置，输出CommonJS格式的SSR资源 #

如果希望SSR资源适配Node默认的CommonJS模块系统，修改vite.config.js：

import { defineConfig, splitVendorChunkPlugin } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            ssr: "resources/js/ssr.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        splitVendorChunkPlugin(),
    ],
    build: {
        rollupOptions: {
            output: {
                format: 'cjs' // 强制SSR构建产物为CommonJS格式
            }
        }
    }
});

验证步骤 #

1. 重新构建客户端和SSR资源：

npm run build

2. 启动SSR服务：

• 方案1执行：npm run ssr:start
• 方案2可继续使用：php artisan inertia:start-ssr

3. 启动Laravel开发服务，访问页面确认SSR正常工作。

内容的提问来源于stack exchange，提问作者johnny shepherd