Search code examples
next.jsinternet-explorer-11formikgoogle-map-react

Is there a way to get Formik to work in Internet Explorer 11 using NextJS

I've been creating a small website using NextJS. I used formik and google-map-react to validate a form and show a basic map.

IE11 is "not cooperating" in using these libraries. I've tried changing the babel config and used the next-transpile-modules package to try and provide polyfills and transpiling of the node_modules packages without result.

Any push in the right direction will be greatly appreciated! Kind regards

Solution

  • After further trial and error, I found the package google-map-react to be the problem. Removing the component that uses this package solved the formik/yup errors.

    With regards to google-map-react, I removed this package and used the native google maps api package (@googlemaps/js-api-loader => see documentation for usage).

    To get nextjs to transpile both packages from the node_modules, the next-transpile-modules package was added and used within next.config.js.

    In the end all I had to do was edit my babel.config.json file, the next.config.js and package.json file.

    Below are images of what they look like now.

    enter image description here babel.config.json

    description here next.config.js

    enter image description here add this line to package.json

    Keep in mind that @babel/core, @babel/preset-env, core-js need to be installed.

    I hope this solution is helpful to anybody experiencing the same problems. I also changed the title since formik wasn't the problem.