Error using emoji-mart Picker in Chrome Extension

[nicolasthy]

Hello 👋

I'm working on a monorepo where I have both a web app using Next.js and a Chrome Extension bundled with Vite. I import in both a component that uses emoji-mart Picker. It works great on the web app but I get this error in the extension:

TypeError: Cannot read properties of null (reading 'get')

When I click on the error it brings me to this line:

typeof customElements < "u" && !customElements.get("em-emoji") && customElements.define("em-emoji", lH);

I have absolutely no idea of what's going on but it happens when I use the Picker react component. Has anyone had the same issue?

[nicolasthy]

For anyone in the same situation, I read that the Custom Elements API doesn't work in content scripts. There's an easy way to counter this by installing a polyfill and importing it at the beginning of the app:

npm install @webcomponents/custom-elements

Everything's working great now 😌