Monorepo example

[TheRealFlyingCoder]

So I just wanted to drop this here as I messed around for ages trying to sort this out and I'm not sure whether it would be good to raise and have an example somewhere maybe?

remix-validated-forms promotes the creation of a set of FormField components that you re-use across pacakges (Input, Select etc), which I happily do.

For the first time I am using it in a Monorepo, so I set up a shared "UI" package so I can work like this:

import { SharedInput, SharedButton } from '@shared/ui';

export default function MyPage() {
  return (
    <ValidatedForm validator={validator} method="post">
      <SharedInputname="firstName" label="First Name" />
      <SharedInputname="lastName" label="Last Name" />
      <SharedInputname="email" label="Email" />
      <SharedButton />
    </ValidatedForm>
  );
}

Wonderfully simple, and all my projects can use it like a breeze! :D

There's just a single caveat, that you MUST REMEMBER TO SET YOUR DEPENDENCIES TO PEER IN THE SHARED PACKAGE:

	"peerDependencies": {
		"@remix-run/react": "^1.10.0",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"remix-validated-form": "^4.6.7"
	}
	```
	
I was caught out for ages before I realised that a mismatch of react packages meant there were 2 react context's being loaded onto the page, throwing invariant errors :eyes:

Anyways that's it, feel free to delete if you think this isn't worth anything... I just wanted to be sure :)

[TheRealFlyingCoder]

https://stackoverflow.com/questions/70366040/how-to-inherit-context-correctly-when-using-yarn-workspaces-and-react-router-dom

This stack overflow eventually clued me in, and helped me figure out the issue 😅

[georgiosd]

@TheRealFlyingCoder any chance you can post your full example? I'm still getting (different) errors after trying peerDependencies.

 Building...
✘ [ERROR] Could not resolve "remix-validated-form"

    ../../lib/@shared-ui/TextField.tsx:2:25:
      2 │ import { useField } from 'remix-validated-form'
        ╵                          ~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "remix-validated-form" here because it's not listed as a dependency of this package:

    ../../.pnp.cjs:3399:33:
      3399 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "remix-validated-form" as external to exclude it from the bundle, which will remove this error.


✘ [ERROR] Could not resolve "react/jsx-dev-runtime"

    ../../lib/@shared-ui/TextField.tsx:27:8:
      27 │         <label htmlFor={name} className="form-label">
         ╵         ^

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a dependency of this package:

    ../../.pnp.cjs:3399:33:
      3399 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "react/jsx-dev-runtime" as external to exclude it from the bundle, which will remove this error.