bug: NextJS 15 server side rendering errors.

[GtaExFab]

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.22.3

Current Behavior

Hi Ionic/Stencil Team !
We work on our Design system for 2 years now with StencilJS and we are facing a issue with StencilJS WebComponent with NextJS 15 server side rendering.
When we use the SSR of NextJS 15 we have this error below:

⨯ Internal error: Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
    at retryNode (C:\Users\Administrator\Desktop\NextJS SSR StencilJS\packages\nextjs15\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:25:141772)
    at renderNodeDestructive (C:\Users\Administrator\Desktop\NextJS SSR StencilJS\packages\nextjs15\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:25:136300)
    at retryNode (C:\Users\Administrator\Desktop\NextJS SSR StencilJS\packages\nextjs15\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:25:141587)
    at performWork (C:\Users\Administrator\Desktop\NextJS SSR StencilJS\packages\nextjs15\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:25:157739)
    at Immediate.<anonymous> (C:\Users\Administrator\Desktop\NextJS SSR StencilJS\packages\nextjs15\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:25:59046)
    at process.processImmediate (node:internal/timers:480:21)
    at process.callbackTrampoline (node:internal/async_hooks:130:17)

The server page is returned with a 500 error and load.
Just after, NextJS switch on client rendering -> all prerendered HTML is not present in source page (in chrome network tab)
If we try to build the NextJS project we have an error on Shadow dom serialization and the same error as shown.

Expected Behavior

The server page is generated without error and returned page contains all prerendered HTML with StencilJS components.

System Info

System: node 20.15.0
    Platform: windows (10.0.26100)
   CPU Model: 12th Gen Intel(R) Core(TM) i7-12700 (20 cpus)
    Compiler: C:\Users\Administrator\Desktop\NextJS SSR StencilJS\node_modules\@stencil\core\compiler\stencil.js
       Build: 1732216626
     Stencil: 4.22.3
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

Install all packages
on root folder ->

npm install

Build projects in package with
stencil-components ->

npm run build

react-library ->

npm run build

react-library-ssr ->

npm run build

nextjs15 ->

npm run dev

Try page client with client rendering -> OK
http://localhost:3000/client

Try page server with server side rendering -> KO.
http://localhost:3000/server

Page make a 500 error and switch to client mode with error.

if you use

npm run build

A lot of errors are generated

Code Reproduction URL

https://github.com/GtaExFab/stenciljsnextjs15

Additional Information

Stackblitz project:
https://stackblitz.com/~/github.com/GtaExFab/stenciljsnextjs15

[BohdanYavorskyi]

@christian-bromann Please check this one and give some estimate. It's a super annoying issue and a lot consumers use Nextjs nowadays.

I would also check why hydration scripts not injected automatically when it's server as that would solve everything.

I used to try hydrate script with custom Nextjs server just to check if it really works , and I could see all components on the page. It is not the option though as custom servers lacks tons of features

[christian-bromann]

@BohdanYavorskyi like any open source project, we appreciate any pull request that provide a resolution to this issue, especially if this is a bug that impacts you, you may consider providing support here.

[christian-bromann]

@BohdanYavorskyi @GtaExFab a potential fix has been implemented in ionic-team/stencil-ds-output-targets#562 and we plan to do a release tomorrow. Please keep an eye open and let us know if this problem got resolved after the upgrade, thanks!

[GtaExFab]

@christian-bromann thanks for the info. We will test as soon as possible to gather feedbacks and see if the bug is fixed.

[NSpehler]

Hello @christian-bromann 👋

Unfortunately the new version 0.8.0 did not resolve this issue for me on Next.js 15 😞

[christian-bromann]

@NSpehler can you provide a minimal reproduction case?

[GtaExFab]

Hi, all!
Tested with the same posted solution with Stencil/Core 4.23.0 and React ouput target 0.8.0.
The same errors appear in server side rendering.

_Internal error: Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, store}). If you meant to render a collection of children, use an array instead.

https://github.com/GtaExFab/stenciljsnextjs15
I update the package.json to last version of two libs.
Tks for your help.

[NSpehler]

Thanks for that @GtaExFab!

[christian-bromann]

Mhm .. not sure why it is failing this way. Any contributions that may resolve this bug are much appreciated!

[danielleroux]

I managed to get the ssr part working again without a 500 error from the server side. I had to move all the html-react-parse stuff out of the ssr.tsx file into the nextjs project.

After some checks of the created react component of the parse function I discovered that the $$typeof was changed between $$typeof: Symbol(react.transitional.element) (use html-react-parse lib inside stencil-output-target) and '$$typeof': Symbol(react.element), (use html-react-parse lib inside nextjs project)

https://github.com/ionic-team/stencil-ds-output-targets/blob/2526b82cb4b01563f745c817af144772294e4517/packages/react/src/react/ssr.tsx#L193-L199

I will have to check the html-react-parse library if there are some dependencies to react 18.
Just wanted to share my recent insides.