Element interface conflict in @shopify/oxygen-workers-types package #1156

chinanderm · 2023-07-26T15:52:05Z

chinanderm
Jul 26, 2023

I'm encountering a Typescript types conflict with the @shopify/oxygen-workers-types package within the context of a Remix app. I can't quite resolve what repo that package is coming from so I figured I'd ask here.

A component in our React-based UI library uses a hook that takes a parameter of a ref to a DOM element, specifically anything that extends the global Element interface from lib.dom.d.ts and/or @types/react. Whenever that component is imported into the Remix app, Typescript complains about the differences between the Element interfaces from lib.dom.d.ts / @types/react and @shopify/oxygen-workers-types.

What I've found is that within the context of the Remix app, the Element interface from @shopify/oxygen-workers-types takes precedent and causes the type error.

I've put together a StackBlitz to reproduce the error in a clean environment: https://stackblitz.com/edit/remix-run-remix-bc3yso?file=app%2Froutes%2F_index.tsx

The Remix app setup follow the examples where that types package is referenced in tsconfig.json and in remix.env.d.ts. Removing those references causes the error to go away.

A workaround I have put in place for the moment is to instead utilize @cloudflare/workers-types for the one interface needed. Instead of referencing @shopify/oxygen-workers-types in tsconfig.json and remix.env.d.ts, I simply import the interface from @cloudflare/workers-types where needed, rather than relying on that interface being available in the global scope via @shopify/oxygen-workers-types.

A few questions:

Is this work around appropriate/safe to use?
Is there a different way I need to reference @shopify/oxygen-workers-types?
Is there an issue with @shopify/oxygen-workers-types?
Is there an issue with the library the hook is coming from? (see StackBlitz example)

Thanks for any help that you can provide.