compatibility with Lit

[ceIia]

hey!

i tried implementing wesc in a next.js project running on the latest version (14.0.1 as of today), but there seems to have compatibility issues. i also am using lit for the components, as well as pnpm and turborepo in the frontend repo in case that helps in anyway.

in next dev:

• right after starting the dev server, DSD works fine. although, (sometimes - i haven't been able to exactly pinpoint when) as soon as i navigate to an another page using a next/link component, DSD will not work anymore no matter the amount of reloading until i restart the server. here are some errors that pop up in the console:

@cat.dev/front:dev:  ⨯ ../node_modules/wesc/dist/server.js (18:5481) @ new f
@cat.dev/front:dev:  ⨯ Internal error: Error: unable to initialize this Custom Element
@cat.dev/front:dev:     at new f (../../node_modules/wesc/dist/server.js:11684:35)
@cat.dev/front:dev:     at new ReactiveElement (../../node_modules/@lit/reactive-element/node/development/reactive-element.js:175:9)
@cat.dev/front:dev:     at new LitElement (../../node_modules/lit-element/development/lit-element.js:105:9)
@cat.dev/front:dev:     at new PpnNavigation (../../node_modules/@papernest/acq-components/lib/webcomponents/common/ppn-navigation.js:32:9)
@cat.dev/front:dev:     at nl (../../node_modules/wesc/dist/server.js:13485:46)
@cat.dev/front:dev:     at zu.createElement (../../node_modules/wesc/dist/server.js:13525:36)
@cat.dev/front:dev:     at c (../../node_modules/wesc/dist/react/render.js:7:914)
@cat.dev/front:dev:     at l (../../node_modules/wesc/dist/react/render.js:7:221)
@cat.dev/front:dev:     at g (../../node_modules/wesc/dist/react/render.js:7:64)
@cat.dev/front:dev:     at eval (../../node_modules/wesc/dist/react/index.js:6:387)
@cat.dev/front:dev: null

or:

@cat.dev/front:dev:  ⨯ ../node_modules/wesc/dist/server.js (17:16618) @ split
@cat.dev/front:dev:  ⨯ unhandledRejection: TypeError: e.split is not a function
@cat.dev/front:dev:     at set className [as className] (webpack-internal:///(rsc)/../../node_modules/wesc/dist/server.js:11292:31)
@cat.dev/front:dev:     at f.setAttribute (webpack-internal:///(rsc)/../../node_modules/wesc/dist/server.js:11408:43)
@cat.dev/front:dev:     at AttributePart._commitValue (webpack-internal:///(ssr)/../../node_modules/lit-html/node/development/lit-html.js:1202:32)
@cat.dev/front:dev:     at AttributePart._$setValue (webpack-internal:///(ssr)/../../node_modules/lit-html/node/development/lit-html.js:1180:18)
@cat.dev/front:dev:     at TemplateInstance._update (webpack-internal:///(ssr)/../../node_modules/lit-html/node/development/lit-html.js:737:26)
@cat.dev/front:dev:     at ChildPart._commitTemplateResult (webpack-internal:///(ssr)/../../node_modules/lit-html/node/development/lit-html.js:988:22)
@cat.dev/front:dev:     at ChildPart._$setValue (webpack-internal:///(ssr)/../../node_modules/lit-html/node/development/lit-html.js:847:18)
@cat.dev/front:dev:     at render (webpack-internal:///(ssr)/../../node_modules/lit-html/node/development/lit-html.js:1447:10)
@cat.dev/front:dev:     at PpnNavigation.update (webpack-internal:///(ssr)/../../node_modules/lit-element/development/lit-element.js:143:76)
@cat.dev/front:dev:     at PpnNavigation.performUpdate (webpack-internal:///(ssr)/../../node_modules/@lit/reactive-element/node/development/reactive-element.js:819:22)
@cat.dev/front:dev:     at PpnNavigation.scheduleUpdate (webpack-internal:///(ssr)/../../node_modules/@lit/reactive-element/node/development/reactive-element.js:754:21)
@cat.dev/front:dev:     at PpnNavigation.__enqueueUpdate (webpack-internal:///(ssr)/../../node_modules/@lit/reactive-element/node/development/reactive-element.js:727:29)
@cat.dev/front:dev: null

i'd like to point out that i'm using createComponent from @lit-labs/react to convert my "raw" Web Component into a React component, so this might be related:

// components/ui/navigation.tsx
"use client";
import React from "react";
import { createComponent } from "@lit-labs/react";
import { PpnNavigation } from ".../common/ppn-navigation";

export const Navigation = () => {
  const WCNavigation = createComponent({
    tagName: "ppn-navigation",
    elementClass: PpnNavigation,
    react: React,
  });

  return (
    <WeSC>
      <WCNavigation />
    </WeSC>
  );
};

// app/layout.tsx
import "wesc/server";

import { Navigation } from "~/components/ui/navigation";

export default async function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
        <Navigation menu={navigation} infos={siteInfos} />
        {children}
    </>
  );
}

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  ...
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (!isServer) {
      config.resolve.alias['wesc/server'] = false;
    }

    return config
  },
};

module.exports = nextConfig;

• in next build: the following similar error happens for each statically rendered page, and also it does not break the build, DSD does not work, and FOUC/layout shift still happens since the web component isn't loaded immediately (like in next dev):

  @cat.dev/front:build: TypeError: e.split is not a function
  @cat.dev/front:build:     at set className [as className] (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/794.js:17:16486)
  @cat.dev/front:build:     at sd.setAttribute (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/794.js:18:1281)
  @cat.dev/front:build:     at R.j (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/118.js:1716:5853)
  @cat.dev/front:build:     at R._$AI (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/118.js:1716:5784)
  @cat.dev/front:build:     at M.v (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/118.js:1716:3341)
  @cat.dev/front:build:     at k.g (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/118.js:1716:4549)
  @cat.dev/front:build:     at k._$AI (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/118.js:1716:4012)
  @cat.dev/front:build:     at B (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/118.js:1716:7376)
  @cat.dev/front:build:     at D.update (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/118.js:1715:1089)
  @cat.dev/front:build:     at D.performUpdate (/Users/celiabourial/.dev/cat-next/apps/front/.next/server/chunks/118.js:52:6222)

let me know if i can offer more information about my implementation or anything else, really looking forward to completing this implementation.

[luwes]

Thanks for trying this out!

I tried WeSC in the past with the Shoelace UI components which are also created w/ Lit and it had some issues as well. If I remember correctly Lit is using some advanced DOM API's which are not supported by Linkedom which WeSC uses for polyfilling the DOM.

It is probably possible to achieve but it might take some time and more support from other devs. (If you put your code online somewhere, I'm happy to take a quick look but can't promise anything)

Just curious, doesn't Lit offer an SSR implementation? I think that's probably the way to go because it bypasses many DOM API's using its template syntax.

cc'ing @justinfagnani

[ceIia]

ah! i understand. thanks for the lightning fast answer by the way.

lit does indeed have ssr implementations through @lit-labs/nextjs, @lit-labs/ssr-react and some other packages. sadly, there is no support for app router yet, and it seems some more issues have been piling up on top because of next@14 → https://github.com/lit/lit/issues/3657. i know they're quite backed up at the moment with lit 3.0, so I went looking for some other alternatives, and found your repository in a comment on GH & reddit 😄

i am trying to make a reproduction repository, but i'm running into different issues with hydration mismatches and such 🥲 although in the meantime here's a next@14 basic component setup (w/o WeSC for now): https://github.com/ceIia/lit-next-ssr/tree/next-14