Error when run in latest Remix

[scottwansz]

trafficstars

Prerequisites

• [X] I have searched the existing issues
• [X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [X] I have read the documentation
• [X] 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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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\[email protected][email protected]\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.

[Sutikshan]

Thanks @nickgros , Above way, I am able to use RJSF with Remix SSR. With growing usage of SSR, I hope we will find a way. Another issue I faced with Vite was while importing stuff from @rjsf/utils I was getting following error :

The requested module '@rjsf/utils' is a CommonJS module, which may not support all module.exports as named exports.

which I fixed by importing from it in following way

import * as RjSfUtils from '@rjsf/utils';

const { descriptionId, schemaRequiresTrueValue, getTemplate } = RjSfUtils;