How to make Remix work with react material ui icons

Question

I'm working on a POC with remix + react material (as that's what we use in our main app). I've gotten most things working but I can't get icons to work. Any page that has an icon just hangs and remix yells at me.

Lambda :\Users\chanp\git\my-remix-app\server timed out after 5 seconds

Here's my entry.client. I stole this from the semi-official remix + mui app. I updated the hydrate to work with react 18 (hydrateRoot instead of just hydrate)

import { CacheProvider } from "@emotion/react";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import * as React from "react";
import { useState } from "react";
import { hydrate } from "react-dom";
import { RemixBrowser } from "@remix-run/react";

import createEmotionCache from "./createEmotionCache";
import ClientStyleContext from "./styles/ClientStyleContext";
import muiTheme from "./styles/muiTheme";
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
import Layout from "./src/components/Layout";
import { hydrateRoot } from "react-dom/client";
const container = document.getElementById("app");
// const root = hydrateRoot(container, <App tab="home" />);

interface ClientCacheProviderProps {
  children: React.ReactNode;
}
function ClientCacheProvider({ children }: ClientCacheProviderProps) {
  const [cache, setCache] = useState(createEmotionCache());

  function reset() {
    setCache(createEmotionCache());
  }

  return (
    <ClientStyleContext.Provider value={{ reset }}>
      <CacheProvider value={cache}>{children}</CacheProvider>
    </ClientStyleContext.Provider>
  );
}

hydrateRoot(
  document,
  <ClientCacheProvider>
    <EmotionThemeProvider theme={muiTheme}>
      <ThemeProvider theme={muiTheme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />

        <RemixBrowser />
      </ThemeProvider>
    </EmotionThemeProvider>
  </ClientCacheProvider>,  
);

Versions

React v18.2
Remix v1.6
Other verions from package.json
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/lab": "^5.0.0-alpha.93",
    "@mui/material": "^5.9.3",
    "@mui/styled-engine-sc": "^5.9.3",
    "@mui/styles": "^5.9.3",
    "@mui/x-date-pickers": "^5.0.0-beta.4",

I'm not sure what else would be pertinent to this question. Just let me know if I need to provide more details.

also, for the sake of stackoverflow, what's the correct tag...remix or remix.run — cphilpot, Aug 08 '22 at 17:55

score 1 · Answer 1 · answered Aug 08 '22 at 18:02

1

Doesn't work

import { Sensors } from '@mui/icons-material'

Works

import Sensors from "@mui/icons-material/Sensors";

I also had to add "@mui/icons-material" to serverDependenciesToBundle in the Remix.config.js

Guessing ESBuild is to blame here. Still learnig the quirks so an edit of this answer as to why would be good. Or maybe a link to a resource to a more generic explanation as to why.

answered Aug 08 '22 at 18:02

cphilpot

1,155
3
17
39

My experience is just the opposite. The named import works, while the default does not (remix 1.18.0, mui icons material 5.11.16). – Zbyněk Winkler Jun 29 '23 at 17:16

PhoonOne · Answer 2 · 2023-07-24T15:53:40.813

I just had the same issue. It worked locally while developing, but I noticed it was very slow to rebuild. Once I deployed it to Vercel, I would get a Gateway Timeout: This Serverless Function has timed out.

Updating it import { Refresh} from '@mui/icons-material'

to

import Refresh from "@mui/icons-material/Refresh"; solved the issue.

In the Remix docs they do explain this issue as well: https://remix.run/docs/en/main/other-api/dev-v2#path-imports

How to make Remix work with react material ui icons

2 Answers2