Formik: Importing a Custom Field Component Not Working

[bjenkins24]

❓Question

Having an issue creating a reusable Input field.

This works fine:
```jsx
const MyTextField = ({ name }) => {
return (
{({ field }) => {
return ;
}}

);
}

{() => }

But I want to build out `MyTextField` in a separate package. As soon as I do that it breaks.

```jsx
import MyTextField from 'my-npm-package';

<Formik initialValues={{ email: '' }}>
  {() => <MyTextField name="email" />}
</Formik>

In the separate package MyTextField looks _exactly_ the same as it does when I define it in the same package. This is the error I'm getting:

The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in ThemeProvider (at wrapRootElement.js:6)
    in StaticQueryStore (at root.js:133)
    in _default (at app.js:67)

index.js:71 Uncaught TypeError: Cannot read property 'validate' of undefined
    at Mb (index.js:71)

I've also tried useField instead of <Field /> the error I get there is getFieldProps() of undefined or something like that.

It seems to me like it's not getting the Formik context somehow, but I can't understand why? I'm rendering it where I'm supposed to right? I have Formik as a peer dependency in the npm package where I'm defining MyTextField.

[johnrom]

Hmm. Theoretically this should work if you're using your build tools correctly in both projects. I believe your webpack build for your npm package needs to mark 'formik' as a webpack external (and React, etc) in addition to peerDependencies.

Here's a webpack plugin that might help, though I've never used it: https://github.com/Updater/peer-deps-externals-webpack-plugin
And rollup: https://www.npmjs.com/package/rollup-plugin-peer-deps-external

Relevant Stack Overflow: https://stackoverflow.com/questions/57255680/why-do-i-have-to-list-my-peerdependencies-as-externals-in-the-webpack-config-whe

And some article that might give more context than I can right now: https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f

[bjenkins24]

@johnrom Thank you! Webpack external did it! I feel so dumb! 😄