Error in dev mode with LitElements

[alexandre-lelain]

What version of Remix are you using?

1.14.3

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Hello,

First of all, thank you for this awesome project that is Remix run.

I'm trying to use LitElements in my Remix application. Since Remix uses React, I'm using Lit's React wrapper to be able to use LitElements in my views.

At first, it looks like it works like a charm : I run the dev server, visit my browser, and see my LitElement displayed on the screen. However as soon as I refresh the page or make a change in the code, the application crashes with the following error :

Error: Failed to execute 'define' on 'CustomElementRegistry': the name "my-lit-element" has already been used with this registry

The error stays there until I stop the dev server, and run it again. The error appears again after a page refresh or a code change. And so on. This error seems very similar to this issue in a different project : WICG/webcomponents#754 (comment).

I feel like Remix is not cleaning the CustomElementRegistry cache in dev mode, and since CustomElements can only be defined once, it produces the error I mentioned above when the page is hot-reloaded.

I made a git project to reproduce the error : https://github.com/alexandre-lelain/remix-lit-elements

Expected Behavior

My application should not crash after a page reload in dev mode when using LitElements.

Actual Behavior

My application is crashing after a page reload in dev mode when using LitElements.

[FriedRiceNoodles]

Same problem here!

[alexandre-lelain]

For anyone having the same issue, you can use remix-utils' ClientOnly component to render your LitElement on client side only to avoid the error in development mode.

You will need to rename the file of MyLitElement from MyLitElement.tsx to MyLitElement.client.tsx and wrap the React component in the /routes as such :

// app/routes/index.tsx
import { ClientOnly } from "remix-utils";
import { MyLitElement } from "../components/MyLitElement.client.tsx"

<ClientSide>
{() => <MyLitElement />}
</ClientSide>

However this is just a temporary workaround, because it prevents us to use LitElements in SSR.