Formik: [v2] initialValues broken in 2.0.1-alpha.51 & 2.0.1-rc.0 with CRA

[ArnaudBarre]

🐛 Bug report

Current Behavior

• initialValues are not set in the versions mentioned in dev CRA environment
• Ok in 2.0.1-alpha.5.
• Can't reproduce in codeSandbox
• Works once build

So it's probably a broken compatibility between the development version output of @palmerhq/tsdx and CRA. I can move the issue to tsdx if you want.

Reproducible example

• yarn create react-app formik-test --typescript
• yarn add formik@next
• Change App.tsx to:

import React from "react";
import { Formik } from "formik";

const App: React.FC = () => {
  return (
    <Formik
      initialValues={{ email: "Will crash", password: "" }}
      onSubmit={console.log}
      render={props => (
        <>
          <input value={props.values.email} name="email" type="email" />
          <input
            value={props.values.password}
            name="password"
            type="password"
          />
          <button>Log In</button>
        </>
      )}
    />
  );
};

export default App;

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.0.1-rc.0
| React | 16.8.6
| CRA | 3.0.1
| TypeScript | 3.4.5
| Browser | Chrome
| npm/Yarn | yarn 1.16
| Operating System | macOS

[Andreyco]

Stuping question, but removing node modules helps?

[ArnaudBarre]

@Andreyco No still crashes

[jaredpalmer]

Yeah I think this is a tsdx issue then

[jaredpalmer]

CRA 2 Vanilla: https://codesandbox.io/s/formik-example-87n5n
CRA 2 TypeScript: https://codesandbox.io/s/hopeful-jepsen-rj59x
CRA 3 TypeScript: https://codesandbox.io/s/adoring-robinson-flbis

Seems fine??

[jaredpalmer]

I think the error you're getting is not Formik related per-se. React is yelling at you because your example passes values to inputs without change handlers:

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

If you pass onChange={props.handleChange}, the error goes away.

Example: https://codesandbox.io/s/confident-sammet-thoq2

[t2ca]

Also having issues since alpha.51, values and other props are undefined.

Everything was working fine up to alpha.5

[ArnaudBarre]

@jaredpalmer I downloaded the CRA-3 typescript version and it's works locally.

The problem comes from browserslist in package.json. In CRA 3 init it's now:

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

If i change this in codesandbox nothing happen, but I don't know if this property is taking into account. Locally I need to reinstall node_modules to get/remove the problem.

So this is probably more a problem of the build tools of CRA.

[jaredpalmer]

Yeah this is a tsdx issue.

[jaredpalmer]

Do we know if this is a dev-only or prod-only issue?

[ArnaudBarre]

If I run yarn build && serve -s build in the simple exemple it works. So I assume dev-only but didn't test complex case.

[hckhanh]

We still encounter this bug too, only version 2.0.1-alpha.5 is working. I believe some changes in 2.0.1-alpha.51 lead the bug

[dagstuan]

I noticed this too. 2.0.1-alpha.5 works but 2.0.1-alpha.51 does not. Also I'm not using CRA.

[vieko]

Same here. 2.0.1-alpha.5 is the last one to work. I get undefined errors when trying to access values from useFormikContext()

[rafaelalmeidatk]

I made some tests with Next and the code works when running on the server but not when running on the browser:

const formik = useFormik({
  initialValues: { user: 'test' }
});

Live demo: https://formik-nextjs-jgkhfsskwe.now.sh/ (refresh the page and see the value coming from the server and then being overridden by the client, this is a production build)

Maybe there is something going on the production build of the lib because it works fine if I try to run it locally in development mode or use the dev files instead of the production ones (renaming them).

[jaredpalmer]

Back from paris. This was a tsdx issue. Can you try installing formik@next and report back?

[t2ca]

It's working again, thanks @jaredpalmer

[ArnaudBarre]

Working 👍