bug: @stencil/ssr package with Next.js streaming outputs error

[henrijoss]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.27.1

Stencil Framework Output Target

React

Stencil Framework Output Target Version

1.2.0

Current Behavior

When using the @stencil/ssr package with Next.js streaming a console error is logged:

A second declarative shadow root cannot be created on a host.

Expected Behavior

No console error.

Steps to Reproduce

Add a dynamic react server component containing a stencil web component which will resolve after a couple of seconds:

import { MyComponent } from 'component-library-react';

import { headers } from 'next/headers';

const wait = (ms: number) => new Promise((res) => setTimeout(res, ms));

export default async function AsyncTest() {
  // Force dynamic rendering
  const _ = await headers();
  await wait(3000);

  return (
    <>
      Async Data <MyComponent first="Stencil" last="'Don't call me a framework' JS" className="my-8" />
    </>
  );
}

Wrap the component in a Suspense boundary:

import { Suspense } from 'react';
import AsyncTest from '../../components/AsyncTest';

export default function Home() {
  return (
    <>
      <Suspense fallback="Loading...">
        <AsyncTest />
      </Suspense>
    </>
  );
}

Code Reproduction URL

Additional Information

No response