Node.js/Vite SSR: ERR_UNSUPPORTED_DIR_IMPORT с @mui/material/utils во время SSR Inertia.js ⇐ Javascript

[Anonymous]

Я столкнулся с ошибкой ERR_UNSUPPORTED_DIR_IMPORT во время рендеринга на стороне сервера (SSR) с помощью Vite, React, MUI (Material UI) и Inertia.js. Конкретное сообщение об ошибке:

Код: Выделить всё

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"?

Эта ошибка возникает только во время процесса SSR (

Код: Выделить всё

php artisan inertia:start-ssr). Сборка на стороне клиента работает нормально.
[b]Контекст проблемы:[/b]
Я использую следующие технологии:
[list]
[*][b]Laravel:[/b] 11.38.2
[*][b]Inertia.js:[/b] 2.0.0
[*][b]Реакция:[/b] 19.0.0
[*][b]MUI (Material UI):[/b] 6.4.0
[*][b]Vite:[/b] 6.0.7
[*][b]Node.js:[/b] 22.13.0
[*][b]npm:[/b] 10.9.  2
[/list]
[b]Что я пробовал:[/b]
[list]
[*][b]Исправленный config/inertia.php:[/b] Я убедился, что путь пакета

в моем файле config/inertia.php правильно указывает на пакет SSR, созданный Vite (который теперь находится в bootstrap/ssr/ssr .js):

Код: Выделить всё

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

[*]

Код: Выделить всё

noExternal

Конфигурация:[/b] я добавил соответствующие пакеты MUI, лексические пакеты, пакеты реагирования и @inertiajs/server в массив ssr.noExternal в моем vite.config.js :

Код: Выделить всё

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

[*]Чистая установка: Я попробовал удалить node_modules, package-lock.json, очистив кеш npm и переустановив зависимости.

[*]Обновленный MUI: Я обновил MUI до последняя версия.

[*]Исправлен импорт в ssr.jsx: я проверил импорт в файле ssr.jsx.

[*]проверенные выходные данные конфигурации vite и выходные данные ssr: я проверил выходные данные конфигурации vite и выходной каталог ssr.
< /li>
[/list]
Соответствующие фрагменты кода:

• Код: Выделить всё

  vite.config.js

  :[/b]

  Код: Выделить всё

  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

  :[/b]

  Код: Выделить всё

  
  Подробнее здесь: [url]https://stackoverflow.com/questions/79366266/node-js-vite-ssr-err-unsupported-dir-import-with-mui-material-utils-during-ine[/url]