[Bug]: Error when using with Immer 10

[Minivera]

Which packages are impacted?

• [X] remix-validated-form
• [ ] @remix-validated-form/with-zod
• [ ] @remix-validated-form/with-yup
• [ ] zod-form-data

What version of these packages are you using?

• remix-validated-form: ^5.0.1
• @remix-validated-form/with-zod: ^2.0.6
• immer: ^10.0.2

Please provide a link to a minimal reproduction of the issue.

https://codesandbox.io/p/sandbox/amazing-frost-2g4gy4

Steps to Reproduce the Bug or Issue

1. Open the demo on codesandbox and start the app
2. See the crash on load

Expected behavior

I would expect the library to work with any version of immer installed locally, since the library should export its own version of immer? Seems like NPM is picking up the locally installed version instead, and the library does not support v10.

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: 114.0.5735.199

Additional context

No response

[airjp73]

Looks like zustand has immer as a peer dependency and it is picking up the local version of immer. I don't think it makes sense for immer to be a required peer dependency of this library so I'll have to dig a bit to figure out the best solution for this. Maybe there's a way to force zustand to resolve to RVF's version of immer.

[Minivera]

Would it make sense to update the version of immer of the library to v10? I'm not sure what the breaking changes are yet, but I could try making a PR for it if it helps.

[airjp73]

Could you try it with version 5.1.1-beta.0 to see if that fixes the error?

[Minivera]

👍 Will do and then let you know

[Minivera]

It works great on the codesandbox, will try on our app locally then edit this comment: https://codesandbox.io/p/sandbox/heuristic-firefly-4y96td

EDIT:

On our local application, I'm seeing this error in the page where the form is used. I'll try to dig into it and provide a reproduction:

Uncaught Error: Dynamic require of "react" is not supported
    at chunk-73CLBT4D.js:13:9
    at with-selector.development.js:26:23
    at ../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js (with-selector.development.js:164:3)
    at __require22 (fieldArray.tsx:196:10)
    at ../../node_modules/use-sync-external-store/shim/with-selector.js (with-selector.js:6:20)
    at __require22 (fieldArray.tsx:196:10)
    at index.mjs:4:41

[airjp73]

Hi! Sorry for the slow turnaround. Could you post a reproduction of the new error so I can debug it?

[airjp73]

The initial fix is now released in 5.1.2.

[airjp73]

Nevermind, I've managed to reproduce the issue. I've rolled back the initial fix in 5.1.3 because of the dynamic require issue.

[Minivera]

I wasn't able to reproduce the issue in a codesandbox and could not figure out why it was failing in our local app, so we've moved forward with locking our own version of immer for now. Do you have a sandbox where you managed to reproduce the issue? I'd be curious as to what caused it.

[airjp73]

RVF v6 has been released 🎉

In v6, I've upgraded the versions of zustand and immer that this library is using, so I'm hoping this is no longer an issue. If this is still a problem in that version, please feel free to open a new issue.

You can find the documentation here and the migration guide here.