compatibility with Lit

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.

Start by reproducing the reported failures with components/ui/navigation.tsx, app/layout.tsx, and next.config.js in a Next.js 14.0.1 project using Lit and @lit-labs/react. Run next dev and next build, then inspect the wesc/server.js stack traces around custom-element initialization and className handling. Done means DSD works after client navigation and during static builds without the reported errors or FOUC/layout shift.