-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
MUI 6.x / React__namespace.createContext is not a function #22
Comments
This is the same issue as in #20 |
This PR changes how module resolution works in `@lazarv/react-server`. This is a major change and needs more test cases in the future to maintain stability and quality. Add support for the following third-party libraries: - @tanstack/react-query - @mui/material - @mantine/core Some packages need to be specifically marked as `external` to keep them usable. Examples: - `lucide-react` in https://github.com/lazarv/react-server/blob/fix/external-use-client/docs/vite.config.mjs#L7 - `better-sqlite3` in https://github.com/lazarv/react-server/blob/fix/external-use-client/examples/todo/react-server.config.json#L3 The `external` packages can be specified by adding a `resolve.external` section to `react-server.config.json` (`.mjs` or `.ts`) or `vite.config.mjs` (`.ts`). ```json { "resolve": { "external": ["better-sqlite3"] } } ``` This PR should also fix the following issues: - Mantine / use client not respected #20 - MUI 6.x / React__namespace.createContext is not a function #22 To showcase usage of these third-party libraries, this PR also adds new examples: - https://github.com/lazarv/react-server/tree/fix/external-use-client/examples/react-query - https://github.com/lazarv/react-server/tree/fix/external-use-client/examples/mui - https://github.com/lazarv/react-server/tree/fix/external-use-client/examples/mantine Some low-level packages needed special attention: - hoist-non-react-statics - prop-types - react-is
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 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. |
With this PR the framework in development mode relies on Vite's dependency optimizer in a cleaner and simpler way to handle CommonJS dependencies. Adds a new Chakra UI example to have another third-party library usage as a test case for module resolution. Cleans up some inline Vite / Rollup plugin code. Another possible enhancement to fix issues around third-party libraries, related to issues: - Mantine / use client not respected #20 - MUI 6.x / React__namespace.createContext is not a function #22
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!
Validations
The text was updated successfully, but these errors were encountered: