How did I manage to support IE 11 using RHF version 7

[pooyarm]

Recently we adopted react-hook-form for our product, refactored many components in this regard but didn't expect RHF to not support IE 11 then had to fix the problem, going back to v6 wasn't an option for us. Here I want to explain how I managed to do that.

Transpile

Our FE is based on Next.js and for supporting browsers we're using corejs. Then I've updated our webpack configuration to transpile RHF with our babel configuration. With something like:

const babelDoNotExcludeRegexes = [/\/react-hook-form\//]
config.module.rules[0].exclude = function (path) {
  if (babelDoNotExcludeRegexes.some((regex) => regex.test(path))) { return false }
  return originalExclude(path)
}

but it didn't work exactly as I expected, because the file RHF is exporting is named index.esm.mjs which is js module, and while our babel was trying to transpile it, for some reason it couldn't do it like the rest and thrown error. When I renamed that file manually to index.esm.js and changed package.json accordingly, it worked properly so I was happy that the solution will work, I just needed to tell babel transpiler to consider index.esm.mjs like the rest js files. for that I've set module type to javascript/auto in our webpack configuration:

config.module.rules[0].type = 'javascript/auto'

What else?

After this everything worked fine on IE 11 except one error which was saying something like "contains is not a function". After I went deep in the bundled code I realised RHF is using document.contains which is not supported by IE 11, good thing is that it can be easily polyfilled by the following piece of code:

if (!document.contains) {
  document.contains = (node) => document.body.contains(node)
}

I know the polyfill doesn't fill all cases, but still it's enough for our product. we don't have a case of asking document for something out of body.

Now everything works fine in IE 11 🎉

How RHF could help me to do it easier?

During the whole process I faced some obstacles that took much time to research and solve:

1. First thing was index.esm.mjs, I think if RHF was exporting that file with .js extension, it was easier to do it. but I don't complain!
2. The second thing was using document.contains, I think document.body.contains could be used instead. (if I'm not mistaken)
3. and at the end I think it was possible for RHF to support IE 11.

At the end I should say "Thank You ❤️ " to RHF team for such a great library.