Upgrade to v6 - having an issue with fieldtemplate

[JonnyBhub]

Prerequisites

• I have read the documentation

What theme are you using?

mui

What is your question?

Hello,

I am getting the below when upgrading to rjsf 6 and wondered if there were any pointers as the error message is generic and not helping me pinpoint where to look.

react-jsx-runtime.development.js:87 Warning: React.jsx: 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`.

[JonnyBhub]

I have just tested the core Form import and the issue appears to be specifically with the mui Form component. It looks like the MUI Form is just busted right now as I can't even create a basic form with it

[JonnyBhub]

After some digging it is coming from this part of the fieldtemplate component specifically. It's returning an object instead of a react component

const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
  'WrapIfAdditionalTemplate',
  registry,
  uiOptions,
);

This is actually further down but the first error I get is pointing to the id of the fieldtemplate, could it be possible an object is being passed to the id field instead of a string?

[heath-freenome]

@JonnyBhub Do you have a custom field, template or widget? My company uses the MUI theme and I'm not experiencing any issues with the theme. Can you provide a reproducible test case? Either in a code sandbox or a RJSF playground link?

[JonnyBhub]

@heath-freenome we have quite an extensive custom schema however I tested with a brand new one field schema and got the same. I tried chakra, antd and core and all the Form components work with our custom mui components. It's literally only upon using the import Form from @rjsf/mui .

The latest version of v5 works fine too

[heath-freenome]

Can you create a reproducible test case for us, otherwise we won't know how to fix it.

[JonnyBhub]

@heath-freenome good news, appears to be an issue with the tsconfig we had. Reverted modules to es2022 and it's fixed. nodenext was being used. Did a clean dependency install and changed that and was sorted. I do find it odd how everything else worked except the mui module

[heath-freenome]

Yes, typescript can be a tricky thing. If you haven't already you MAY want to consider switching the moduleResolution to bundler. It solved a few problems we were having too.