React accesses internal properties on getField proxy, breaking future export FormOptionsProvider

[transparent-citizen]

There seem to be cases during rendering where React tries to access properties such as "$$typeof" or [Symbol.toStringTag] on the proxy returned by conform's getField.

I noticed this while trying out the new FormOptionsProvider API alongside defineCustomMetadata. The following error is thrown:

Uncaught Error: Property "$$typeof" does not exist on field metadata. If you have defined the CustomMetadata interface to include "$$typeof", make sure to also implement it through the "defineCustomMetadata" property on <FormOptionsProvider />.

which stems from

conform/packages/conform-react/future/state.ts

Lines 480 to 483 in 46ab924

	throw new Error(
	`Property "${String(prop)}" does not exist on field metadata. ` +
	`If you have defined the CustomMetadata interface to include "${String(prop)}", make sure to also implement it through the "defineCustomMetadata" property on <FormOptionsProvider />.`,
	);

As a workaround, adding these two getters to the defineCustomMetadata function lets the app render without issues, but obviously this isn't ideal:

{
	get $$typeof() { // <-----
		return undefined;
	},
	get [Symbol.toStringTag]() { // <-----
		return "Object";
	},
	get inputProps() {
		 // ...
	}
}

[edmundhung]

Hmm, mind sharing your setup a bit more? I have updated the UI examples but I haven't seen this happened myself.

[transparent-citizen]

Of course. I managed to distill it to this, which should allow you to reproduce it.

[transparent-citizen]

I just deleted a few things that were not required to reproduce it.

Here's two key observations:

• conform will not throw if you move route a outside the layout
• conform will not throw if you remove the link to /a in the layout.

[edmundhung]

Thanks for the repo! Just get back from Remix Jam today. I will take a look tomorrow.

[edmundhung]

I think #1062 should fix your issue. I have tested it with your repro and it seems to work. Can you double check if that fix it?

You can test the pre-release version by running npm i https://pkg.pr.new/@conform-to/react@1062

[transparent-citizen]

Yes, this fixes it on my end as well. Thank you very much for addressing this issue so quickly!

I'm still catching up with all the talks, but I hope Remix Jam has been a blast. 🙂