Website fails when using @mui/material 5.15.12: Directory import not supported

[corneliusroemer]

Website doesn't run when upgrading to @mui/material 5.15.12, fails with:

07:53:04 PM [@astrojs/node] Server listening on http://localhost:3000
07:53:12 PM [@astrojs/node] Could not render /
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/app/node_modules/@mui/system/styleFunctionSx' is not supported resolving ES modules imported from /app/dist/server/chunks/pages/_datasetId__1864fc08.mjs
Did you mean to import @mui/system/styleFunctionSx/index.js?
    at finalizeResolution (node:internal/modules/esm/resolve:258:11)
    at moduleResolve (node:internal/modules/esm/resolve:917:10)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///app/node_modules/@mui/system/styleFunctionSx'
}

Originally posted by @corneliusroemer in #1247 (comment)

[lukepereira]

during the next batch of updates to the datasets UI i'm hoping to switch MUI components to use tailwind, will check back on this issue after

[lukepereira]

@corneliusroemer The error message no longer seems to mention the seqset page

21:12:02 [ERROR] Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/ec2-user/workspace/loculus/website/node_modules/@mui/system/RtlProvider' is not supported resolving ES modules imported from /home/ec2-user/workspace/loculus/website/dist/server/chunks/pages/index_FaMceamT.mjs
Did you mean to import "@mui/system/RtlProvider/index.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:258:11)
    at moduleResolve (node:internal/modules/esm/resolve:924:10)
    at defaultResolve (node:internal/modules/esm/resolve:1148:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36)

The only info i've been able to find on this specific error message also suggests staying on version "~5.14.20"

https://qiita-com.translate.goog/miyawa-tarou/items/7c968e9e316d7ba1f938?_x_tr_sl=ja&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=sc

[corneliusroemer]

Thanks for looking into it. This is possibly because we've switched to Astro 4 which might have changed how things are packaged into dist.

Downloading the website docker image and grepping I find the following line being the issue:

$ DOCKER_DEFAULT_PLATFORM=linux/amd64  docker run -it ghcr.io/loculus-project/website:commit-9faf361 grep RtlProvider /app/dist/server/chunks/pages/index_8Z-uPTk0.mjs
import { useRtl } from '@mui/system/RtlProvider';

I'll try to find out why we import this and what the issue is.

[lukepereira]

Seems like it may be a general problem with astro transpiling mui which impacts many components. I removed the all pages under src/pages/seqset and another similar error cropped up for the page src/pages/[organism]/user/edit/[accession]/[version].astro

23:02:06 [ERROR] Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/ec2-user/workspace/loculus/website/node_modules/@mui/system/styleFunctionSx' is not supported resolving ES modules imported from /home/ec2-user/workspace/loculus/website/dist/server/chunks/pages/_version__C3VBv2dJ.mjs
Did you mean to import "@mui/system/styleFunctionSx/index.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:258:11)
    at moduleResolve (node:internal/modules/esm/resolve:924:10)
    at defaultResolve (node:internal/modules/esm/resolve:1148:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36)

then another for a createGroups chunk which i couldn't track down

23:08:08 [ERROR] Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/ec2-user/workspace/loculus/website/node_modules/@mui/system/styleFunctionSx' is not supported resolving ES modules imported from /home/ec2-user/workspace/loculus/website/dist/server/chunks/pages/createGroup_CunLzix7.mjs
Did you mean to import "@mui/system/styleFunctionSx/index.js"?
   at finalizeResolution (node:internal/modules/esm/resolve:258:11)
   at moduleResolve (node:internal/modules/esm/resolve:924:10)
   at defaultResolve (node:internal/modules/esm/resolve:1148:11)
   at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
   at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
   at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
   at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
   at link (node:internal/modules/esm/module_job:86:36)

[theosanderson]

I think we should aim to remove all MUI fairly soon. I'm currently doing that for the Search Form, which I believe is the major usage point.

[theosanderson]

Issue for removal: #1548

[anna-parker]

Closing as we have #1548 to follow up on this