EmojiPicker component produces 404's in console from jsdelivr

[firxworx]

Sweet little library you added here, its a helpful contribution to the FOSS world!

Issue

EmojiPicker component produces 404's in console from jsdelivr.

Ideally the component shouldn't depend on being able to hit 3rd party URL's for any data, i.e. it should be self contained.

There are countless use-cases for an app UI to render without connectivity and/or because the deploy environment has a strict content security policy or other configuration that will block access to third party URL's.

Replication

• install the package (current release version)
• use the emoji picker in the most basic way:
  • import EmojiPicker from 'emoji-picker-react'
  • use the <EmojiPicker /> in render() of the component
• check the browser JS console and observe 404's and the network requests resulting from use of the component

See screenshot for example of 404's related to apple icons in the console from jsdelivr.

[jimaek]

Indeed it looks like either the library is not generating the correct URLs or some images were not pushed to NPM.

The demo has GET https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/2695-fe0f.png 404

And if you check the NPM package that file is not present there, although there are similar looking files. https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/

[ealush]

Hey👋

Unfortunately, there's nothing much to do here. The reason the picker uses a CDN is that the images need to come from somewhere. Storing them on the package itself would increase the bundlebsize significantly, and would make it slow as it would not benefit from the speed of a CDN.

Some images do not exist on the CDN, as the emoji standard keeps growing. The picker tries to self correct by removing failed images from render.

I'd love to hear other suggestions on how to treat this.

[jimaek]

Have you tried hosting the images in a separate Github repo? jsDelivr should be able to use any repo of any size when serving individual files, it just wont be able to show a browsing UI. Then the CDN specific JS code hosted on NPM could load the images from the jsDelivr Github endpoint and you wouldn't need to remove any images to keep the size low. Example https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react/scripts/prepare.js