0

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

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
Kurt Van Hal
  • 35
  • 3
  • What do you mean by "not cooperating"? What issues are you seeing? – juliomalves Feb 21 '21 at 16:34
  • @juliomalves In regards to the google-map-react, the map isn't showing (marker is). Formik does not work at all, it reloads the page adding the values of the form as a querystring. – Kurt Van Hal Feb 21 '21 at 23:10
  • Is there any error in console? Please provide [a minimal code snippet](https://stackoverflow.com/help/minimal-reproducible-example) which can **reproduce** the issue. Or provide the steps to reproduce the issue. It's hard to help with only the above text description. – Yu Zhou Feb 22 '21 at 02:51
  • Thx for the help offered. I apologies for the late response, the question has been edited with a working solution (for me at least). – Kurt Van Hal Feb 28 '21 at 19:29
  • @KurtVanHal The answers must go in the answer section, please read [ask] and [answer] in addition to reviewing the [tour] so that you understand how the site works – eyllanesc Feb 28 '21 at 19:35

1 Answers1

0

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.

Kurt Van Hal
  • 35
  • 3
  • I'm glad that you have solved the issue. You can mark your answer as an accepted answer. It can help other community members in future in similar kind of issues. Thanks for your understanding. – Yu Zhou Mar 01 '21 at 01:36