I can't use Formik

[BrunoAwdd]

just include the line
import {Formik} from 'formik';
and the application already presents this screen. I tried everything I could, I'm out of ideas

`TypeError: Object(...) is not a function
./node_modules/formik/dist/formik.esm.js
C:/Users/Asus/WebstormProjects/reactjs/node_modules/formik/dist/formik.esm.js:173
  170 | 
  171 | var FormikContext =
  172 | /*#__PURE__*/

> 173 | createContext(undefined);
  174 | var FormikProvider = FormikContext.Provider;
  175 | var FormikConsumer = FormikContext.Consumer;
  176 | function useFormikContext() {
View compiled
__webpack_require__
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:88
  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {
View compiled
./src/Api/people/abstract/form.js
http://localhost:3000/static/js/bundle.js:340029:65
__webpack_require__
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:88
  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {
View compiled
./src/Api/people/abstract/edit.js
http://localhost:3000/static/js/bundle.js:339104:67
__webpack_require__
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:88
  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {
View compiled
./src/Routes.js
http://localhost:3000/static/js/bundle.js:344275:85
__webpack_require__
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:88
  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {
View compiled
./src/App.js
http://localhost:3000/static/js/bundle.js:343673:66
__webpack_require__
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:88
  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {
View compiled
./src/index.js
http://localhost:3000/static/js/bundle.js:498606:63
__webpack_require__
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:88
  85 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 | 		hotCurrentParents = [];
  87 | 	}
> 88 | 	return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 | 	return {
View compiled
0
http://localhost:3000/static/js/bundle.js:498969:18
__webpack_require__
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
(anonymous function)
C:/Users/Asus/WebstormProjects/reactjs/webpack/bootstrap 85940909eeac41d9b134:724
  721 | __webpack_require__.h = function() { return hotCurrentHash; };
  722 | 
  723 | // Load entry module and return exports
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View compiled
(anonymous function)
http://localhost:3000/static/js/bundle.js:728:10`

[jaredpalmer]

Can you create a codesandbox reproducing your bug?

[ludwi]

I had this problem when I installed Formik in an old project. Quote from the docs:

Since Formik 2 is built on top of React Hooks, you must be on React 16.8.x or higher

[johnrom]

Yep, this is probably an issue with hooks and a pre-hooks React install. @BrunoAwdd try installing Formik v1.x and see if it works. If so, you'll have to update React to use Formik v2.x.

From: facebook/react#14484

This error might happen if you use old React. It's not even a React error — you're calling React.useState(), and if that doesn't exist (such as in old versions), it's like calling React.lalalala(). The function doesn't exist, so you're calling undefined() and it crashes.

It might also happen if you call a non-existent method on some other library.

[maddhruv]

Closing due to long inactivity