Closed aheissenberger closed 2 months ago
This is the same issue as in https://github.com/lazarv/react-server/issues/20
Material UI 6 should work now using the latest version (0.0.0-experimental-da250e2-20240909-6dc86ec1).
@aheissenberger the only inconvenience is that you need to install more MUI related packages than usual. You can check out the MUI example at https://github.com/lazarv/react-server/tree/main/examples/mui. These are the dependencies used in that example to make it work.
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@fontsource/roboto": "^5.0.14",
"@lazarv/react-server": "workspace:^",
"@lazarv/react-server-router": "workspace:^",
"@mui/icons-material": "^6.0.2",
"@mui/material": "^6.0.2",
"@mui/styled-engine": "^6.0.2",
"@mui/system": "^6.0.2",
"@mui/utils": "^6.0.2"
}
Also when using @mui/icons-material
you need to directly use the ESM version of the icons, like at https://github.com/lazarv/react-server/blob/main/examples/mui/app/components/ProTip.jsx#L1
import LightbulbOutlined from "@mui/icons-material/esm/LightbulbOutlined";
This is needed because in development mode Vite is not tree-shaking and so it would import every single icon in the package, which is just painful during development. When building for production this is not an issue as Rollup is properly tree-shaking as expected. Rolldown might help with this in the future, but it's uncertain at this point.
Your repro repository might be private or the name is incorrect as I get a 404 on the link you provided. If you would open up the repo I could check it against the latest version if needed.
you are right - I accidentally made it private.
@aheissenberger this still doesn't work as expected in development mode, I'll investigate the issue using your repo, thanks for sharing it.
As mentioned in #20 please try upgrading to the latest version of the framework and give it another go.
The same goes for Material UI as for Mantine, this works now as expected. @aheissenberger if there's any specific issue around using Material UI, open a new issue to address it directly, thanks!
This issue has been locked since it has been closed for more than 30 days.
If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest version of @lazarv/react-server. If you have any other comments you should create a new discussion.
Describe the bug
I want to use MUI 6.x which supports react server components with Next.js.
Error:
Reproduction
https://github.com/aheissenberger/issue-react-server-mui-6
Steps to reproduce
Run
pnpm install && pnpm exec react-server
System Info
Used Package Manager
pnpm
Logs
Click to expand!
```shell react-server/0.0.0-experimental-ad417f4-20240831-5a91fe57 starting development server 10:46:07 [react-server] Initializing router configuration 10:46:07 [react-server] Router configuration successful vite:config using resolved config: { vite:config root: '/rs-mui', vite:config public: 'public', vite:config server: { vite:config preTransformRequests: true, vite:config middlewareMode: true, vite:config cors: false, vite:config hmr: { port: 24678 }, vite:config https: false, vite:config fs: { vite:config strict: true, vite:config allow: [Array], vite:config deny: [Array], vite:config cachedChecks: undefined vite:config }, vite:config sourcemapIgnoreList: [Function: isInNodeModules$1] vite:config }, vite:config publicDir: '/rs-mui/public', vite:config appType: 'custom', vite:config clearScreen: false, vite:config configFile: undefined, vite:config optimizeDeps: { vite:config holdUntilCrawlEnd: true, vite:config include: [ vite:config 'react-dom', vite:config 'react-dom/client', vite:config 'react-server-dom-webpack/client.browser', vite:config 'react', vite:config 'react/jsx-dev-runtime', vite:config 'react/jsx-runtime' vite:config ], vite:config exclude: [], vite:config needsInterop: [], vite:config extensions: [], vite:config noDiscovery: false, vite:config esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' }, vite:config disabled: undefined, vite:config entries: undefined, vite:config force: false vite:config }, vite:config css: { vite:config postcss: '/rs-mui', vite:config lightningcss: undefined vite:config }, vite:config plugins: [ vite:config 'vite:optimized-deps', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:react-babel', vite:config 'vite:react-refresh', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config '@lazarv/react-server-router', vite:config 'react-server:eval', vite:config 'react-server:runtime', vite:config 'react-server:use-client', vite:config 'react-server:use-server', vite:config 'react-server:use-server-inline', vite:config 'react-server:asset', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:worker-import-meta-url', vite:config 'vite:asset-import-meta-url', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:client-inject', vite:config 'vite:css-analysis', vite:config 'vite:import-analysis' vite:config ], vite:config cacheDir: '/rs-mui/.react-server/.cache/client', vite:config resolve: { vite:config mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ], vite:config conditions: [], vite:config externalConditions: [], vite:config external: [], vite:config noExternal: [], vite:config extensions: [ vite:config '.mjs', '.js', vite:config '.mts', '.ts', vite:config '.jsx', '.tsx', vite:config '.json' vite:config ], vite:config dedupe: [ 'react', 'react-dom' ], vite:config preserveSymlinks: true, vite:config alias: [ [Object], [Object], [Object], [Object] ] vite:config }, vite:config customLogger: { vite:config hasWarned: false, vite:config info: [Function (anonymous)], vite:config warn: [Function (anonymous)], vite:config warnOnce: [Function (anonymous)], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen], vite:config hasErrorLogged: [Function: hasErrorLogged] vite:config }, vite:config environments: { vite:config client: { vite:config resolve: [Object], vite:config nodeCompatible: false, vite:config webCompatible: true, vite:config injectInvalidationTimestamp: true, vite:config dev: [Object], vite:config build: [Object] vite:config }, vite:config ssr: { vite:config resolve: [Object], vite:config nodeCompatible: true, vite:config webCompatible: false, vite:config injectInvalidationTimestamp: false, vite:config dev: [Object], vite:config build: [Object] vite:config }, vite:config rsc: { vite:config resolve: [Object], vite:config nodeCompatible: true, vite:config webCompatible: false, vite:config injectInvalidationTimestamp: false, vite:config dev: [Object], vite:config build: [Object] vite:config } vite:config }, vite:config esbuild: { jsxDev: true, jsx: 'automatic', jsxImportSource: undefined }, vite:config build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: { onwarn: [Function: onwarn] }, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config copyPublicDir: true, vite:config manifest: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config ssrEmitAssets: false, vite:config emitAssets: false, vite:config reportCompressedSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }, vite:config modulePreload: { polyfill: true }, vite:config cssMinify: true, vite:config lib: false vite:config }, vite:config configFileDependencies: [], vite:config inlineConfig: { vite:config root: '/rs-mui', vite:config public: 'public', vite:config server: { vite:config middlewareMode: true, vite:config cors: false, vite:config hmr: [Object], vite:config https: false, vite:config fs: [Object] vite:config }, vite:config publicDir: '/rs-mui/public', vite:config appType: 'custom', vite:config clearScreen: false, vite:config configFile: false, vite:config optimizeDeps: { force: undefined, include: [Array] }, vite:config css: { vite:config postcss: '/rs-mui' vite:config }, vite:config plugins: [ vite:config [Promise], [Object], vite:config [Object], [Array], vite:config [Object], [Object], vite:config [Object], [Object] vite:config ], vite:config cacheDir: '/rs-mui/.react-server/.cache/client', vite:config resolve: { preserveSymlinks: true, alias: [Array] }, vite:config customLogger: { vite:config hasWarned: false, vite:config info: [Function (anonymous)], vite:config warn: [Function (anonymous)], vite:config warnOnce: [Function (anonymous)], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen], vite:config hasErrorLogged: [Function: hasErrorLogged] vite:config }, vite:config environments: { client: [Object], ssr: [Object], rsc: [Object] } vite:config }, vite:config base: '/', vite:config rawBase: '/', vite:config command: 'serve', vite:config mode: 'development', vite:config isWorker: false, vite:config mainConfig: null, vite:config bundleChain: [], vite:config isProduction: false, vite:config builder: { vite:config sharedConfigBuild: false, vite:config sharedPlugins: false, vite:config entireApp: false, vite:config buildApp: [AsyncFunction: defaultBuildApp] vite:config }, vite:config preview: { vite:config port: undefined, vite:config strictPort: undefined, vite:config host: undefined, vite:config https: false, vite:config open: undefined, vite:config proxy: undefined, vite:config cors: false, vite:config headers: undefined vite:config }, vite:config envDir: '/rs-mui', vite:config env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function (anonymous)], vite:config warn: [Function (anonymous)], vite:config warnOnce: [Function (anonymous)], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen], vite:config hasErrorLogged: [Function: hasErrorLogged] vite:config }, vite:config packageCache: Map(1) { vite:config 'fnpd_/rs-mui' => { vite:config dir: '/rs-mui', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config set: [Function (anonymous)] vite:config }, vite:config worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} }, vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, vite:config future: undefined, vite:config ssr: { vite:config target: 'node', vite:config external: [ vite:config 'react', vite:config 'react/jsx-runtime', vite:config 'react/jsx-dev-runtime', vite:config 'react-dom', vite:config 'react-dom/client', vite:config 'react-server-dom-webpack' vite:config ], vite:config noExternal: [], vite:config optimizeDeps: { vite:config include: [], vite:config exclude: [], vite:config needsInterop: [], vite:config extensions: [], vite:config noDiscovery: true, vite:config holdUntilCrawlEnd: true, vite:config esbuildOptions: [Object], vite:config disabled: undefined, vite:config entries: undefined, vite:config force: false vite:config }, vite:config resolve: { conditions: [Array], externalConditions: [Array] } vite:config }, vite:config dev: { vite:config sourcemap: { js: true }, vite:config sourcemapIgnoreList: [Function: isInNodeModules$1], vite:config preTransformRequests: false, vite:config warmup: [], vite:config optimizeDeps: { vite:config include: [], vite:config exclude: [], vite:config needsInterop: [], vite:config extensions: [], vite:config noDiscovery: true, vite:config holdUntilCrawlEnd: true, vite:config esbuildOptions: [Object], vite:config disabled: undefined, vite:config entries: undefined, vite:config force: false vite:config }, vite:config createEnvironment: undefined, vite:config recoverable: false, vite:config moduleRunnerTransform: true vite:config }, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks], vite:config createResolver: [Function: createResolver] vite:config } +0ms connect:dispatcher use / viteTimeMiddleware +0ms connect:dispatcher use / viteCachedTransformMiddleware +0ms connect:dispatcher use /__open-in-editor launchEditorMiddleware +0ms connect:dispatcher use / viteHMRPingMiddleware +0ms connect:dispatcher use / viteServePublicMiddleware +1ms connect:dispatcher use / viteTransformMiddleware +0ms connect:dispatcher use / viteServeRawFsMiddleware +0ms connect:dispatcher use / viteServeStaticMiddleware +0ms connect:dispatcher use / viteErrorMiddleware +0ms 10:46:07 [react-server] Adding source file (root).layout.jsx to router 10:46:07 [react-server] Adding source file index.tsx to router 10:46:07 [react-server] Router configuration ready vite:deps removing old cache dir /rs-mui/.react-server/.cache/client/deps +0ms vite:resolve 0.67ms react-dom -> /rs-mui/node_modules/.pnpm/react-dom@0.0.0-experimental-58af67a8f8-20240628_react@0.0.0-experimental-58af67a8f8-20240628/node_modules/react-dom/index.js +0ms vite:resolve 0.28ms react-dom/client -> /rs-mui/node_modules/.pnpm/react-dom@0.0.0-experimental-58af67a8f8-20240628_react@0.0.0-experimental-58af67a8f8-20240628/node_modules/react-dom/client.js +0ms vite:resolve 0.11ms react-server-dom-webpack/client.browser -> /rs-mui/node_modules/.pnpm/react-server-dom-webpack@0.0.0-experimental-58af67a8f8-20240628_react-dom@0.0.0-experimental-_wxsgdtszfpife56u4s4s5xyfvu/node_modules/react-server-dom-webpack/client.browser.js +1ms vite:resolve 0.15ms react -> /rs-mui/node_modules/.pnpm/react@0.0.0-experimental-58af67a8f8-20240628/node_modules/react/index.js +0ms vite:resolve 0.07ms react/jsx-dev-runtime -> /rs-mui/node_modules/.pnpm/react@0.0.0-experimental-58af67a8f8-20240628/node_modules/react/jsx-dev-runtime.js +0ms vite:resolve 0.04ms react/jsx-runtime -> /rs-mui/node_modules/.pnpm/react@0.0.0-experimental-58af67a8f8-20240628/node_modules/react/jsx-runtime.js +0ms vite:deps scanning for dependencies... +0ms connect:dispatcher use / anonymous +22ms 10:46:07 [react-server] Server listening on 10:46:07 [react-server] ➜ Local: http://localhost:3000 10:46:07 [react-server] ➜ Network: use --host to expose 10:46:07 [react-server] ✔ Ready in 245ms vite:deps Scan completed in 12.04ms: no dependencies found +0ms vite:deps creating package.json in /rs-mui/.react-server/.cache/client/deps_temp_2a5c5eeb +18ms vite:resolve 0.13ms react -> /rs-mui/node_modules/.pnpm/react@0.0.0-experimental-58af67a8f8-20240628/node_modules/react/index.js +28ms vite:resolve 0.10ms react-dom -> /rs-mui/node_modules/.pnpm/react-dom@0.0.0-experimental-58af67a8f8-20240628_react@0.0.0-experimental-58af67a8f8-20240628/node_modules/react-dom/index.js +3ms vite:resolve 0.98ms scheduler -> /rs-mui/node_modules/.pnpm/scheduler@0.0.0-experimental-58af67a8f8-20240628/node_modules/scheduler/index.js +19ms vite:deps Dependencies bundled in 65.44ms +66ms vite:hmr [file change] .react-server/react-server-router.d.ts +0ms vite:hmr (client) [no modules matched] .react-server/react-server-router.d.ts +1ms vite:hmr (ssr) [no modules matched] .react-server/react-server-router.d.ts +0ms vite:hmr (rsc) [no modules matched] .react-server/react-server-router.d.ts +0ms connect:dispatcher viteTimeMiddleware : / +12s connect:dispatcher viteCachedTransformMiddleware : / +0ms connect:dispatcher viteHMRPingMiddleware : / +0ms connect:dispatcher viteServePublicMiddleware : / +0ms connect:dispatcher viteTransformMiddleware : / +0ms connect:dispatcher viteServeRawFsMiddleware : / +1ms connect:dispatcher viteServeStaticMiddleware : / +0ms connect:dispatcher viteErrorMiddleware : / +0ms connect:dispatcherValidations