react-hook-form: IE11 problem in v6.7.0

Thanks @bluebill1049 .

But I’m not sure only Object.values and Object.entries are necessary. There may be others.

we can probably can include more as we go…

Thanks @bluebill1049 .

But I’m not sure only Object.values and Object.entries are necessary. There may be others.

oops forgot to push, it’s updating now… 😃 https://github.com/react-hook-form/documentation/commit/2f64faf524cac3e3f1e511a90c0e60446884e766

@bluebill1049 @yhor1e Thank you so much for supporting to this issue🙇‍♂️ I also think the added description is very good.

here is what will be included in the doc.

@bluebill1049

hmmm perhaps we will have to ask users to include polyfills? (include them in the doc) otherwise

I think the document will be better to explain which polyfills are necessary, like below.

• Object.values
• Object.entries

I want to avoid importing the whole polyfill like import 'react-app-polyfill/stable';

Here you go! react-hook-form/documentation#467

Amazing! thank you. your name is in the repo now 😃

Thanks @vutoan266 for sharing the solution.

Not relative to IE11 but I have a problem with safari on ios11. It lacks Array.polyfill.flat(). Here is the polyfill I get from https://stackoverflow.com/questions/56468914/ie11-attempt-to-use-the-method-flat-polyfill-causes-error-within-the-polyfill/56501391

// Also polyfill Array.isArray:
if (!Array.isArray) {
  Array.isArray = function (arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat#Polyfill
if (!Array.prototype.flat) {
  Array.prototype.flat = function (depth) {
    var flattened = [];
    (function flat(array, depth) {
      for (var i = 0; i < array.length; i++) {
        var el = array[i];
        if (Array.isArray(el) && depth > 0) {
          flat(el, depth - 1);
        } else {
          flattened.push(el);
        }
      }
    })(this, Math.floor(depth) || 1);
    return flattened;
  };
}

Thanks very much for your help @yhor1e ❤️

LGTM!! 💯

Thanks @bluebill1049 .

@bluebill1049

I think React Hook Form is transpiled for IE11 by Typescript without Bable or core-js now.

Refs:

• rollup/rollup.ie11.config.js
• tsconfig.ie11.json
• #2702

But I’m afraid the Typescript option "target": "es5" is not enough for IE11.

I tried to transpile a sample code using Object.values by Typescript. I created objectValues.ts.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

And I ran below command.

$ tsc --version                                      
Version 4.0.2

$ tsc objectValues.ts --target es5 --lib "es2017,dom"

Then I got objectValues.js. But it doesn’t include any polyfills.

var object1 = {
    a: 'somestring',
    b: 42,
    c: false
};
console.log(Object.values(object1));

Thanks very much for the finding and investigation!

That’s correct @kotarella1110 made this change, hmmm perhaps we will have to ask users to include polyfills? (include them in the doc) otherwise, it does make this build rather complicated.

@bluebill1049

I think React Hook Form is transpiled for IE11 by Typescript without Bable or core-js now.

Refs:

• rollup/rollup.ie11.config.js
• tsconfig.ie11.json
• #2702

But I’m afraid the Typescript option "target": "es5" is not enough for IE11.

I tried to transpile a sample code using Object.values by Typescript. I created objectValues.ts.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

And I ran below command.

$ tsc --version                                      
Version 4.0.2

$ tsc objectValues.ts --target es5 --lib "es2017,dom"

Then I got objectValues.js. But it doesn’t include any polyfills.

var object1 = {
    a: 'somestring',
    b: 42,
    c: false
};
console.log(Object.values(object1));

Thank you for your time @bluebill1049.

it would be great if you can provide me some insight

I got it. I’ll report if I notice anything.

I have the same problem too. I guess many cases works fine using import 'react-app-polyfill/stable';. ref: https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill

But consider #2468 memory leaks and the global namespace, I want to use minimal polyfills.

By the way, I try to import only below polyfills. And it seems to work fine. It should be more test though.

• import “core-js/features/object/values”;
• import “core-js/features/object/entries”;

Are these right minimal polyfills for React Hook Form? I’m afraid it may be hard to judge.

Thanks, @yhor1e for the feedback. It’s going to be tricky for me, as I am not a windows user, yes I can spin up a virtual machine but it would be great if you can provide me some insight, consider we are already using babel to transpile the project and dedicated IE build, we can potentially investigate there.

IE 11! @kotarella1110 sorry to tag you again, looks like this IE is never-ending…