Laravel+Inertia SSR启动时@mui/material/utils的ERR_UNSUPPORTED_DIR_IMPORT错误解决求助

各位好，最近在搭建Laravel+Inertia+React+MUI的服务端渲染项目时，碰到了一个卡了好久的问题——启动SSR服务（php artisan inertia:start-ssr）时总是抛出ERR_UNSUPPORTED_DIR_IMPORT错误，但客户端构建完全正常，实在没辙了，来求助大家。

具体错误信息如下：

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/var/www/html/myproject/node_modules/@mui/material/utils' is not supported resolving ES modules imported from /var/www/html/myproject/node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
Did you mean to import "@mui/material/node/utils/index.js"?

项目技术栈 #

• Laravel: 11.38.2
• Inertia.js: 2.0.0
• React: 19.0.0
• MUI (Material UI): 6.4.0
• Vite: 6.0.7
• Node.js: 22.13.0
• npm: 10.9.2

我已经尝试过的解决方法 #

• 修正config/inertia.php配置：确认了bundle路径正确指向Vite生成的SSR包（当前路径是bootstrap/ssr/ssr.js），相关配置代码：

  'bundle' => base_path('bootstrap/ssr/ssr.js'),
  

• 配置ssr.noExternal：在vite.config.js里把相关的MUI包、Lexical包、React包以及@inertiajs/server都加入了noExternal数组，后来还补充了@mui/material/utils和@mui/icons-material，配置片段：

  ssr: {
      noExternal: [
          '@inertiajs/server',
          '@mui/material',
          '@mui/material/utils',
          '@mui/utils',
          '@mui/system',
          '@mui/styled-engine',
          '@mui/icons-material',
          '@emotion/react',
          '@emotion/styled',
          '@lexical/code',
          '@lexical/react',
          'lexical',
          'react-dom/server',
          'react'
      ],
  },
  

• 清理重装依赖：删除了node_modules、package-lock.json，清空npm缓存后重新安装所有依赖
• 升级MUI到最新版：已经将MUI更新到当前最新的6.4.0版本
• 检查ssr.jsx导入语句：确认SSR入口文件里的导入没有问题
• 验证Vite配置与SSR输出：检查过Vite配置的输出，也确认了SSR包的输出目录是正确的

相关完整代码片段 #

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx', 
            refresh: true,
        }),
        react(),
    ],
    build: {
        outDir: 'public/build',
    },
    ssr: {
        build: {
            outDir: 'bootstrap/ssr',
        },
        noExternal: [
            '@inertiajs/server',
            '@mui/material',
            '@mui/material/utils',
            '@mui/utils',
            '@mui/system',
            '@mui/styled-engine',
            '@mui/icons-material',
            '@emotion/react',
            '@emotion/styled',
            '@lexical/code',
            '@lexical/react',
            'lexical',
            'react-dom/server',
            'react'
        ], 
    },
    resolve: {
        alias: {
            '@': '/resources/js',
            '@css': '/resources/css',
            '@shared': '/resources/js/Shared',
            '@utils': '/resources/js/utils',
        }
    },
});

config/inertia.php #

<?php

return [
    'ssr' => [
        'enabled' => env('INERTIA_SSR_ENABLED', true),
        'url' => env('INERTIA_SSR_URL', 'http://127.0.0.1:13714'),
        'bundle' => base_path('bootstrap/ssr/ssr.js'),
    ],
];

resources/js/ssr.jsx #

import React from 'react';
import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server'
import { renderToString } from 'react-dom/server';
import Layout from '@shared/Layout';

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: name => {
          const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
          return pages[`./Pages/${name}.jsx`]
        },
        setup({ App, props }) {
            return <Layout children={<App {...props} />} />;
        },
    })
);

期望与实际行为 #

• 期望行为：SSR服务能正常启动，不出现ERR_UNSUPPORTED_DIR_IMPORT错误
• 实际行为：该错误持续存在，导致SSR服务无法启动

问题 #

想请教各位大佬，怎么解决这个MUI在Vite SSR+Inertia场景下的ERR_UNSUPPORTED_DIR_IMPORT错误？是不是需要针对MUI的内部模块解析做什么特殊配置或者有什么可行的 workaround？

备注：内容来源于stack exchange，提问作者absolutkarlos