Appropriate polyfills for IE11 #2468

kwht-k · 2020-08-04T04:15:00Z

kwht-k
Aug 4, 2020

I'm trying to use React Hook Form on IE11.
I referred to FAQs#BrowserSupport, but I got some errors shown below instead of the error "Object doesn't support property or method find".

Therefore, I added the import statements shown below, and this code worked fine.

App.js

import 'react-app-polyfill/ie11'; // addition
import 'core-js/stable/object/values'; // addition
import 'core-js/stable/object/entries'; // addition
import React from 'react';
import ReactDOM from 'react-dom';
import { useForm } from 'react-hook-form/dist/index.ie11';

function Form() {
  const { register, formState, handleSubmit } = useForm({
    mode: 'onBlur',
  });

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Name</label>
      <input type="text" name="name" ref={register({ required: true })} />
      <input type="submit" disabled={!formState.isValid} value="Submit" />
    </form>
  );
}

function App() {
  const mount = () => {
    ReactDOM.render(<Form />, document.getElementById('form-area'));
  };

  const unmount = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('form-area'));
  };

  return (
    <div>
      <button type="button" onClick={mount}>
        Mount
      </button>
      <button type="button" onClick={unmount}>
        UnMount
      </button>
      <div id="form-area"></div>
    </div>
  );
}

export default App;

Could you please tell me this is correct usage or not?

In addition,I tried react-app-polyfill/stable(cf. Polyfilling other language features. It worked but caused a memory leak when the components were unmounted(Please refer to the screenshots below).
So I want to know which polyfills React Hook Form needs precisely.