This project shows how we got Stencil.js Web Components working inside the Next.js app directory.

Big thanks goes out to Wesley Luyten who created WeSC which served as base of ./packages/web-components-react-wrapper. Also we like to thank Mux for there Web Components React build script which helped us to create our Stencil React Wrapper. 🙏

1. Run npm ci.

2. Run either npm run app:dev or npm run app:start

3. Open http://localhost:3000

   The Web Components from ./packages/web-components are rendered server-side. 🎉

We use a patched version of Stencil.js because by default Stencil.js does not fallback to globalThis when there is no window available e.g. on the server. A pull request which would add this feature and the corresponding issue was closed by the Stencil.js Team. 😔