Electron - MUI Theme not working

[tisdadd]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

mui

Version

6.1.1

Current Behavior

From node package, I get

react-dom-client.development.js:5020 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `FieldTemplate`.
    at createFiberFromTypeAndProps (react-dom-client.development.js:5020:28)
    at createFiberFromElement (react-dom-client.development.js:5034:14)
    at reconcileChildFibersImpl (react-dom-client.development.js:6919:31)
    at eval (react-dom-client.development.js:7097:33)
    at reconcileChildren (react-dom-client.development.js:9700:13)
    at beginWork (react-dom-client.development.js:12048:13)
    at runWithFiberInDEV (react-dom-client.development.js:871:30)
    at performUnitOfWork (react-dom-client.development.js:17640:22)
    at workLoopSync (react-dom-client.development.js:17468:41)
    at renderRootSync (react-dom-client.development.js:17449:11)

If I copy the src folder over, it works.

I am running Linux Mint.

I have produced an example github repo so that you just need to uncomment the <Broken /> component to see the error appear.

Expected Behavior

Running properly straight from npm.

Steps To Reproduce

1. Clone github repo.
2. npm install
3. npm start
4. Go to src/ui/BaseView.tsx and uncomment the {/* <Broken /> */} to throw error.

Environment

- OS: Linux Mint 22.2 Cinnamon
- Node: 22.14.0
- npm: 10.9.2

Anything else?

No response

[heath-freenome]

This was a typescript issue. I did 2 things in your repo and it works fine.

1. I installed @rjsf/core which is a peerDependency of @rjsf/mui and should be installed.
2. I updated your tsconfig.json to look like below since @rjsf exports as ESM first:

{
  "compilerOptions": {
    "jsx": "react",
    "target": "esnext", // <-- I changed this
    "allowJs": true,
    "module": "esnext", // <-- and this
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*"]
}

And I see:

[tisdadd]

Sweet, thank you very much. I thought it might be something like that (typescript fun), but also figured others wanting it in their electron would need the steps too coming from default electron-forge app.

If anyone else comes here, the changes from the default electron-forge typescript template are.

"jsx": "react-jsx",
"target": "esnext",
"module": "esnext",

[heath-freenome]

Actually, the jsx: react-jsx wasn't relevant. I just made that change since all my my own tsconfig.json files had that set in them. I since updated my response to revert back the jsx prop.