Clay: ClayDataProvider doesn't work on IE11

[brunofarache]

Importing @clayui/data-provider fails on IE11.

Error happens in yallist dependency, in this line:

Yallist.prototype[Symbol.iterator] = function* ()

Error in IE11 console is: Expected '('.

Generators are not being correctly transpiled to something IE11 understands.

Dependency tree: #frontend-taglib-clay#@clayui#data-provider#lru-cache#yallist

[matuzalemsteles]

hey @wincent can we add some babel transformer inside the portal, do we have any restrictions? I didn't want to replace lru-cache because of this.

[wincent]

Sorry about the delay (I was on PTO).

IIRC I believe @julien has mentioned in some other contexts that polyfilling Symbol in IE is hard (here is the link to that).

My personally take on this is that we should try to work through those polyfilling issues if we can so that we can freely use generators, but that may not be something that we can do quickly as it will take a while to iron out bumps and roadblocks.

I would just write an LRU data-structure and use it directly, as it is really incredibly trivial, and I don't think the cost of adding this dependency (7.7K, minified) is really worth it. Without exaggeration, you could probably code up an LRU data structure based on a Map including tests in about 30 minutes to an hour. For example, here is one I wrote for my website, and these are the tests.

[wincent]

And here is another example from a project that I used to work on, which is very similar to the implementation that I just posted.

[matuzalemsteles]

Thanks for the explanations @wincent.

IIRC I believe @julien has mentioned in some other contexts that polyfilling Symbol in IE is hard (here is the link to that).

Oh yeah, I had forgotten about that.

I would just write an LRU data-structure and use it directly, as it is really incredibly trivial, and I don't think the cost of adding this dependency (7.7K, minified) is really worth it. Without exaggeration, you could probably code up an LRU data structure based on a Map including tests in about 30 minutes to an hour. For example, here is one I wrote for my website, and these are the tests.

Yeah, I had thought of that at first but I didn't want to reinvent the wheel as it has a lot of packages out and it is well used with 18 million weekly downloads, but I will go with the idea of ​​writing LRU for our data provider implementation.

[nicooprat]

Late to the party, but I had this issue in a Vue project and fixed it by manually transpiling some dependencies in vue.config.js:

module.exports = {
  transpileDependencies: [
    'yallist',
    'lru-cache',
  ]
}

Hope it can help someone lost in Google searching for this! There might be some similar config in other frameworks.