Error when run in latest Remix

[scottwansz]

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?

validator-ajv8

Version

5.x

Current Behavior

I follow the react-jsonschema-form quick start with latest pure clean empty Remix project get error as below:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6120:9)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderIndeterminateComponent (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5852:7)
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderContextProvider (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5997:3)
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6094:11)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderIndeterminateComponent (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5852:7)
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderContextProvider (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5997:3)
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6094:11)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderIndeterminateComponent (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5852:7)
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderIndeterminateComponent (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5852:7)
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderNode (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6336:12)
at renderChildrenArray (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6288:7)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6218:7)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderNode (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6336:12)
at renderHostElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5708:3)
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6029:5)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderNode (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6336:12)
at renderChildrenArray (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6288:7)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6218:7)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderNode (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6336:12)
at renderHostElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5708:3)
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6029:5)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderIndeterminateComponent (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5852:7)
at renderElement (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
at renderNodeDestructiveImpl (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderContextProvider (C:\Users\scott\Desktop\remix-rjsf-demo\node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.node.development.js:5997:3)

Expected Behavior

No response

Steps To Reproduce

No response

Environment

- OS: Windows 11
- Node: node/21.1.0/x64
- pnpm: 8.15.5

Anything else?

the remix project I created by "npx create-vite" then select remix.

No response

[nickgros]

@scottwansz Can you provide a CodeSandbox example?

[scottwansz]

@scottwansz Can you provide a CodeSandbox example?

https://codesandbox.io/p/devbox/sweet-heisenberg-kllcft?workspaceId=c60c87b7-3dc6-4512-919b-c4253f32ff10

[nickgros]

@scottwansz Sorry, I get a "not found" error when I try to open that link

[scottwansz]

@scottwansz Sorry, I get a "not found" error when I try to open that link

sorry, i forget change the permmission, now you access.

[nickgros]

For some reason, SSR is not working. We have not put a ton of effort into SSR use cases for RJSF, so this is not surprising. As a workaround you can do CSR, e.g.

  const [isClient, setIsClient] = useState(false)
  useEffect(() => {
    setIsClient(true)
  }, [])
  return (<>
    {isClient && (<Form {...props} />)}
  </>)

Here's a similar issue: #4083

Us maintainers don't have the bandwidth to dive in deep for every issue, so any help creating PRs or pinpointing the bug would be appreciated.