使用Inertiajs+Laravel+Vuejs+Vite开发时遭遇模块导入及SSR构建配置问题求助

Let's break down your linked issues and walk through how to resolve them step by step:

Issue 1: "Cannot use import statement outside a module" (vue-currency-input) #

This error happens because Node.js tries to run an ES module (vue-currency-input's index.esm.js) in CommonJS mode. Without setting "type": "module" in your package.json, Node defaults to treating .js files as CommonJS—even if your SSR entry is .mjs, dependencies like vue-currency-input can still load in a conflicting way.

Issue 2: "laravel is not a function" after setting "type": "module" #

This pops up because switching to ES modules changes how you import dependencies in your vite.config.ts. Your original config was likely using CommonJS require() syntax, which doesn’t work properly in ES module mode.

Step 1: Fix your package.json and Vite config #

Keep "type": "module" in your package.json (this is required to fix the first error), then update your vite.config.ts to use ES module imports instead of require():

// vite.config.ts
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            ssr: 'resources/js/ssr.js', // Ensure this points to your actual SSR entry file
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // Optional: Ensure vue-currency-input is properly bundled for SSR
    optimizeDeps: {
        include: ['vue-currency-input']
    },
    ssr: {
        noExternal: ['vue-currency-input']
    }
});

Step 2: Update your TypeScript config (if using TS) #

If you’re using TypeScript, adjust your tsconfig.json to output ES modules:

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve"
    },
    "include": ["resources/js/**/*"],
    "exclude": ["node_modules"]
}

Step 3: Rebuild and test #

Run your build commands again:

vite build && vite build --ssr

Once the build finishes without errors, start your SSR server:

node bootstrap/ssr/ssr.mjs

This should resolve both errors: enabling "type": "module" fixes the ES module import issue, and using proper ES module imports in your Vite config resolves the laravel is not a function error. The optional optimizeDeps and ssr.noExternal settings ensure vue-currency-input is fully bundled into your SSR build, avoiding any remaining module resolution conflicts.

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