Publishing / Testing local formik-antd fork from another Local Project

[jwmann]

I was considering adding some PRs but I like to be able to test local changes in my current project prior to submitting the PR.

I know in package.json you can reference another local file / directory as the source of the node module but I tried it and it doesn't seem to build well.
I get errors like

Uncaught TypeError: this.props.formik.registerField is not a function at FieldInner.componentDidMount

If I use the normal package installed via npm itself, I don't get these errors.

Maybe I need to publish / build the project first? Not sure.

[jannikbuschke]

Just using npm for local package references (via npm install file:... for example) sucks. The setup will most likely end up with two versions of each library you are using (for example two versions of react and two versions of formik) and then above error can occur.

You can use lerna for a sophisticated setup. Im actually writing a blog post about it.

The idea is you have one application project and one module project (in this case formik-antd).
inside the formik-antd you can run tsc --watch to constantly build and the app project is a normal react application (i.e. create-react-app) that references the module with the help of lerna locally. The app project gets the updates immediatly.

[jwmann]

That sounds super useful but I feel like it's a bit overkill just for a quick test.
Unless there's something I'm missing.

Perhaps if there was a dev mode for this project that I could develop features on.
I was thinking of adding a feature to SelectField but wanted to test it first.

[jannikbuschke]

It may sound a bit overkill. Especially finding a practical setup is hard and it took me quite some time.

As seen in https://github.com/jannikbuschke/formik-antd-playground this is a powerful setup and it actually is pretty easy to use.

I just published a blogpost about the setup: https://www.jannikbuschke.de/blog/monorepo-with-lerna-react-and-typescript/

You can combine it with git submodules (https://www.jannikbuschke.de/blog/git-submodules/). This would allow you to include formik-antd by its source, so you don't need to wait for new releases.

[jwmann]

Thanks for this, I'm definitely going to check out the blog post.
Just a heads up I believe you meant to link https://github.com/jannikbuschke/formik-antd-playground

Your original link was just this repo 😛

[jannikbuschke]

correct :)

[pavanagrawal123]

@jannikbuschke Trying to test #68 locally, but the changes for modular imports seem to break the lerna playground... Any insight? Thanks :)

[jannikbuschke]

Y, something seems to be broken.
However you should be able to test against master (version 1.2 I think) or?

[jannikbuschke]

Actually it works for me. I deleted /lib and /es folders,
and run

npm run bootstrap
npm run tsc
npm run start

[pavanagrawal123]

@jannikbuschke are you using the modular imports + the babel plugin?
i can get it to work normally without the babel plugin

[jannikbuschke]

I would recommend to test against master without modular imports + babel plugin.

[pavanagrawal123]

@jannikbuschke would you happen to know what is causing the error below?

I'm on master for formik-antd and my react app is a pretty basic normal react app. This error does not occur when I use the package from npm, it only occurs when i try to install from source with lerna.

[jannikbuschke]

@pavanagrawal123 this happens if some library (either react or formik in this case I think) is brought in twice by the packages.
The playground has /app/ and /formik-antd/ as a package. Both have dependencies on react and formik. If when running the whole thing app uses a different copy of react (or formik) than formik-antd, then above error occurs.

This is why we need to run lerna bootstrap --hoist in the root. lerna will look at all dependencies and will pick one that will be used by all packages.
Running npm run bootstrap in root should solve your problem (npm script that runs lerna bootstrap --hoist)