2.7.0 : MUI named import generate error

[raskyer]

Reproduction

Clone : https://github.com/raskyer/remix-bug
npm run dev
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 16.48 GB / 31.73 GB
  Binaries:
    Node: 20.9.0 - ~\AppData\Local\fnm_multishells\26476_1708451566467\node.EXE
    npm: 10.1.0 - ~\AppData\Local\fnm_multishells\26476_1708451566467\npm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @remix-run/dev: ^2.7.1 => 2.7.1
    @remix-run/express: ^2.7.1 => 2.7.1
    @remix-run/node: ^2.7.1 => 2.7.1
    @remix-run/react: ^2.7.1 => 2.7.1
    vite: ^5.1.0 => 5.1.3

Used Package Manager

npm

Expected Behavior

I want to be able to import : import Button from '@mui/material/Button as stated in :
https://mui.com/material-ui/getting-started/usage/
without issue.

Actual Behavior

I have the following error :
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

[pcattori]

Looks like @mui/material is not configured properly for ESM. You can workaround this by either:

• Using the CJS interop Vite plugin
• Setting ssr.noExternal: ["@mui/material"]

Note that this is not a Remix specific issue, and will be an issue for any Vite SSR projects.
For more see the ESM/CJS troublshooting section of the docs.

Closing as this isn't something solvable by Remix.

[QzCurious]

Hi @pcattori, I'd love to let you know that ssr.noExternal: ["@mui/material"] won't be working.

In addition, I was able to make it work by cjsInterop({ dependencies: ["@mui/material/*"] }). I don't know but the /* IS NECESSARY.

BTW, I'm not any familiar with ESM/CJS problem (too hard for me) but trying to get luck on this issue.

[pcattori]

@QzCurious could you try bundling @mui/* dependencies only in production as suggested in this template?

[QzCurious]

@QzCurious could you try bundling @mui/* dependencies only in production as suggested in this template?

For production build, it works. And for your convenience, here is a reproduction code I used for testing it.

Curious about the suggestion, why would we only configuring it for production and make it unusable for local dev?

[QzCurious]

The conditional ssr.noExternal configuration inspired me to try remix-serve ./build/server/index.js for a build bundle. Turns out I need combine both ssr.noExternal, cjsInterop to make both dev and production server working.

Here's how it should be configured:

export default defineConfig({
  // dev: failed; build: success; remix-serve: failed
  // https://github.com/kiliman/remix-vite-mui/blob/aee050114dae1b01d35276a7d7641d5df45fcfba/vite.config.ts#L10
  ssr: {
    noExternal: process.env.NODE_ENV === "production" ? [/^@mui\//] : [],  // or  `['@mui/**']`
  },

  plugins: [
    remix(),
    tsconfigPaths(),
    // dev: success; build: success; remix-serve: failed
    process.env.NODE_ENV === "development" &&
      cjsInterop({
        dependencies: ["@mui/material/*"],
      }),
  ],
});