Object.fromEntries is not a function on some browsers

[EvanetaI]

Hello, I get this error written in the title on some browsers, the problem is that they don't support Object.fromEntries.
The code I added as shown on the picture is resolving this issue. Is there any chance to fix this in order to use the library without errors?

[greggman]

For older browsers you can use polyfills for features they don't support

https://www.google.com/search?q=fromentries+polyfill

[EvanetaI]

Thanks, I know about this, but to be honest I'm not sure where I have to import it after install. If you can help me, it will be really appreciated.

[greggman]

I'm not sure I can help as there 1000s of ways to manage web page projects and I don't know all of them

How are using unzipit now? as an npm package? from a CDN? Are you using WebPack? Rollup? etc.... Are you using typescript?

[EvanetaI]

yes, i'm using unzip as a npm package, we using gulp, and yes typescript. How to use it, I mean where to import the library, because I'm calling unzip() in a class where I'm unziping all files and then collecting them in a map. The Object.fromEntries is needed inside your library, so I think that the polyfills library should be imported in you unzipit.js file where I can't make any modifications.

[greggman]

This is not how polyfills work. You do not need to modify the library. If every library that used a modern feature included it's own polyfills your website would bloat to multiple megabytes of duplicated polyfill code stuck inside every library and every library's dependencies.

Try one of these solutions

https://www.mydatahack.com/adding-polyfills-in-typescript-app/

note: you can also just put the code you pasted above, outside the library.

[greggman]

If that wasn't clear. This will work

import * as unzipit from 'unzipit';


/**
 * Object.entriesFrom() polyfill
 * @author Chris Ferdinandi
 * @license MIT
 */
if (!Object.fromEntries) {
	Object.fromEntries = function (entries){
		if (!entries || !entries[Symbol.iterator]) { throw new Error('Object.fromEntries() requires a single iterable argument'); }
		let obj = {};
		for (let [key, value] of entries) {
			obj[key] = value;
		}
		return obj;
	};
}

---

So will this

// mypolyfill.js

/**
 * Object.entriesFrom() polyfill
 * @author Chris Ferdinandi
 * @license MIT
 */
if (!Object.fromEntries) {
	Object.fromEntries = function (entries){
		if (!entries || !entries[Symbol.iterator]) { throw new Error('Object.fromEntries() requires a single iterable argument'); }
		let obj = {};
		for (let [key, value] of entries) {
			obj[key] = value;
		}
		return obj;
	};
}

import * as unzipit from 'unzipit';
import './mypolyfill.js'

---

Or you can use one of the many existing polyfills which generally work exactly the same as mypolyfill.js above

[EvanetaI]

Thanks a lot for your time and the fact that you trying to help me! I also found these solutions on the Internet. I still can't understand how adding the code I sent in decompressSVG function will reflect the unzipit library, does this extra code affect only the code that is in the same function scope? I have my class, and in this class, I have a function (decompressSVG the one from the shot above) that is calling the unzip function, if I add the code that is solving the issue above, it won't affect the library and I still will get the same error. Is that correct? Excuse me if I ask dummy questions, I'm junior and really want to understand how to do it properly.

[greggman]

There is global object called "Object"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

It has a bunch of functions on it. For example, Object.assign

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Some functions were added in newer browsers. For example Object.fromEntries

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

It was added to all browsers 5-6yrs ago.

A "polyfill" adds a missing function (or API, feature, etc) to old browsers.

The polyfill code above checks, does the function fromEntries exist on the global object Object

if (!Object.fromEntries) {

If the function does not exist, then the code adds a function that matches what the missing built in function is supposed to do.

That added function becomes available globally because it's on a global object. So, without changing any other code, code that tries to call Object.fromEntries will be able to call it.

note: You probably shouldn't be adding polyfill code to your decompressSVG function. You should add it outside of your decompressSVG function. Usually at the very start of your program. You add in all the polyfills you need for older browsers, then start your main code.

[EvanetaI]

Thank you, thank you so much it works now!
I have another question about unzipping and the time it takes to do it. It's not linked to this issue, so I won't ask here. What do you suggest to open a new issue about this or?

[greggman]

yes you should probably start a new issue if you have a different question