Using Formik as a peer dependency in a library

[iam-markus]

Hello.

I have 2 projects:
A) A base library (npm package)
B) The main project

The base library contains components that need Formik, e.g:

import React, { useRef, useEffect } from 'react';
import { useField } from 'formik';

export function FormTextInput({ label, onChange, isLoading, type='text', labelClass, customError='', isSuccess = false, ...props }) {
    const [field, meta] = useField(props);
    const id = props.id || props.name;

    return (
        <div className="field">
            <label htmlFor={id}>{label}</label>
            <div>
                <input className="input" id={id} type={type} {...field} {...props} onChange={handleChange} />
                {isSuccess &&
                    <Icon icon={GoCheck} className="is-small is-right has-text-success" />
                }
            </div>
        </div>
    );
}

However when importing Formik and using it in the Project, it throws this:

<Formik
    initialValues={{
        email: '',
        password: ''
    }}
    validationSchema={LoginSchema}
    onSubmit={(values) => {
        GA.logEvent('verify_login_click');
        login(values.email, values.password);
    }}
>
  <Form>
    <FormTextInput label="Name" id="name" ... />
  </Form>
</Formik>

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

When I move the FormTextInput into the project, everythig works fine.
In the library I have declared Formik as a peer dependency (using parcel to bundle).
Because the library is linked (npm link) into the project, I tried linking formik but that throws an error as well:

> formik@2.2.6 prepublish /Users/me/baselib/node_modules/formik
> npm run build


> formik@2.2.6 build /Users/me/baselib/node_modules/formik
> tsdx build --tsconfig tsconfig.build.json

sh: tsdx: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn

Is there any workaround / solution how to include formik in npm libraries?

[johnrom]

formik@2.2.6 prepublish /Users/me/baselib/node_modules/formik

That's definitely not going to work. It looks like you linked the development Formik into your project somehow. I'd guess that Formik is exposing an issue that you already have between your two projects. Installing Formik is causing your dependencies change that is causing your two projects to have different versions of React. You can test this by checking:

> npm ls react
> npm ls react-dom

# example -- all deduped and same version
+-- @storybook/addon-actions@5.2.8
| +-- @storybook/api@5.2.8
| | `-- react@16.12.0  deduped
| +-- @storybook/components@5.2.8
| | `-- react@16.12.0  deduped
| `-- react@16.12.0  deduped
+-- @storybook/react@5.2.8
| `-- @storybook/core@5.2.8
|   `-- @storybook/ui@5.2.8
|     `-- react@16.12.0  deduped
`-- react@16.12.0

They should both return only one version from all dependencies. You can do a few things:

1. Add package.json at your root directory above both projects, install react and react-dom in this package.json. Remove those packages from your subprojects.
2. Use Lerna to manage your dependencies between your libraries. You might still end up with conflicts here. If you end up with different versions of React required in your projects, you'll have to use resolutions at the root Lerna project (and hope they are compatible)

// package.json
{
  // package.json things
  resolutions: {
    "react": "16.x.x" // the version of React you actually use
  }
}

3. Use npm link react and npm link react-dom in both your projects, because the problem isn't whether your projects are linked together, the problem is whether they are using the same react / dom version.
4. Yes, this keeps going
5. Use react and react-dom as peer dependencies in your library project, and only install it in your main project.
6. I think that's all the options.

[iam-markus]

I tried all of that except 1 & 2 (dont want to use lerna).

The reason I tried to link formik was because I got an error when specifying it as a peer dependency in the library and then importing this component in the app:
(I dont want to bundle formik with the library)

1. import React, { useRef, useEffect } from 'react';
2. import { useField } from 'formik';
3. 
4. export function FormTextInput({ label, onChange, isLoading, type='text', labelClass, customError='', isSuccess = false, ...props }) {
5.    const [field, meta] = useField(props);
6.    const id = props.id || props.name;

At runtime: Uncaught TypeError: Cannot read property 'getFieldProps' of undefined (throws this on line 5)

Yes, the component is wrapped inside a <Formik> component, so there should be a context.
I also get this warning:

Formik context is undefined, please verify you are calling useFormikContext() as child of a <Formik> component.
warning | @ | tiny-warning.cjs.js:13
| useFormikContext | @ | FormikContext.tsx:14
| useField | @ | Field.tsx:79
| FormTextInput | @ | Input.js:10

Which indicates to me that the component (defined in the lib) can't find it's parent context (defined in the app).

[johnrom]

@iam-markus that's correct. Lerna fixes this problem by having a root workspace where node modules can be shared between both projects and linking your projects to that shared workspace.

You can do this yourself as well manually using yarn workspaces.

When you have peer dependencies, you must also list them as devDependencies in order to install them to work during development. Then, you have to list them as externals in your build tool (webpack, rollup, etc). Finally when you build them for production you must either bundle your "library project" into your production main project using your build tool or pull your "library project" from an npm or github repository with your built assets.

Once you've set all that up, during development you need to make sure they use compatible versions of react and react-dom and make sure that version is the same instance using npm or yarn link. You may need to do that for other dependencies as well if you run into issues. I've never had to do this for Formik but, who knows. Lerna will do most of this for you, and all you would need to do with Lerna is make sure your build bundles your library app or release it to an npm/git repo that is accessible from your production build environment.