[joy-ui] Integrate Joy UI with Remix v2

[mbarni99]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I would like to see a page on the Joy UI 'Integrations' dropdown menu where there are detailed instructions on how to integrate Joy UI into an up-to-date Remix SSR application (with TypeScript, obviously).

Examples 🌈

Motivation 🔦

I switched from Vite-based React SPAs to server-side rendering. Tried both Next.js (from 13.4) and Remix (from v1.16 or something) and I believe Remix has renewed the way of developing React applications. It has an awesome DX and a growing ecosystem. I would like to continue using MUI (probably switching from Material UI to Joy UI on its production release), but I do not want crucial drawbacks because of the SSR. I have found, read and also implemented myself the material-ui-remix-ts example, but I had a really hard time integrating that one with other popular Remix-based libraries like remix-i18next because both libraries want developers to replace code parts in entry.client.tsx and entry.server.tsx. And neither do I want to spend days of figuring things out on lower levels to have them working together, because I do not feel competent enough to that task with confidence and on time yet.

[samuelsycamore]

Thanks for the suggestion @mbarni99 ! I agree that it would be awesome to have a solid Joy UI + Remix example. That said, I don't think any of us maintainers have much experience with Remix, and we're all pretty short on bandwidth to tackle learning a new framework at the moment (as much as I'd love to). 😅 I've added the ready to take label here in the hope that some Remix pro will come around and take the lead on this! 🤞

[alexserver]

I've been using remix for quite a while this year and I'm a big fan of mui library. It was one of the first UI libraries I used to build web apps.
The major problem I've found with using remix v2.2 is that remix enforces the usage of ES modules, adding type="module" to package.json, and when you want to import any component, you get an error because of this.
I've read that this is because ES6 modules still doesn't support import directories yet, but I don't understand, since every component starts with an index.ts file.
Has anyone else came across this error ?

[alexserver]

This is the problem with mui examples:
That every library they use they use the latest version, which is prone to big conflicts after all libraries will continue to evolve over time taking different directions after the point of the timeline this example was created!

  "dependencies": {
    "@emotion/cache": "latest",
    "@emotion/react": "latest",
    "@emotion/server": "latest",
    "@emotion/styled": "latest",
    "@mui/material": "latest",
    "@remix-run/css-bundle": "latest",
    "@remix-run/node": "latest",
    "@remix-run/react": "latest",
    "@remix-run/serve": "latest",
    "@remix-run/server-runtime": "latest",
    "react": "latest",
    "react-dom": "latest"
  },

[mogadanez]

latest example of https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts
works fine itself, but still struggle to add support of i18next to it

sergiodxa/remix-i18next#181

I know that MUI probably working on full ESM support( #30671 )
but not sure how to close they are.

Anyone had luck to use remix-i18next and mui in same project?