bug: NextJS 15 TypeError in Development for client or server side rendered components

[artursopelnik]

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

Current Behavior

Hi Ionic/Stencil Team

I'm working on a design system using StencilJS and Next.js 15 with App Router.

When I run Next.js in development mode (npm run dev) and open the page in the browser—especially when opening it a second time—I see a TypeError logged in the console. What could be causing this? Both the client-side rendering and SSR itself seem to be working fine.

Any insights or potential fixes would be greatly appreciated! Thanks in advance.

next dev

   ▲ Next.js 15.1.7
   - Local:        http://localhost:3000
   - Network:      http://192.168.178.42:3000

 ✓ Starting...
 ✓ Ready in 1743ms
 ○ Compiling / ...
 ✓ Compiled / in 888ms (608 modules)
 GET / 200 in 1228ms
 ○ Compiling /server ...
 ✓ Compiled /server in 598ms (711 modules)
 GET /server 200 in 732ms
 ⨯ TypeError: doc.querySelectorAll is not a function
    at eval (webpack-internal:/stencil-library/dist/components/src/components/my-component/my-component.tsx:9:24)
    at (ssr)/../stencil-library/dist/components/my-component.js (.next/server/app/server/page.js:236:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(ssr)/../react-library-ssr/lib/components/stencil-generated/MyComponent.ts:5:111)
    at (ssr)/../react-library-ssr/lib/components/stencil-generated/MyComponent.ts (.next/server/app/server/page.js:214:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(ssr)/../react-library-ssr/lib/components/stencil-generated/components.ts:5:70)
    at (ssr)/../react-library-ssr/lib/components/stencil-generated/components.ts (.next/server/app/server/page.js:225:1)
    at Object.__webpack_require__ [as require] (.next/server/webpack-runtime.js:33:43)
   7 |   shadow: true,
   8 | })
>  9 | export class MyComponent {
     |                        ^
  10 |   /**
  11 |    * The first name
  12 |    */ {
  digest: '3493695745'

Expected Behavior

The pages loaded without an error.

System Info

System: node 22.13.1
    Platform: darwin (23.6.0)
   CPU Model: Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz (16 cpus)
    Compiler: /Users/artursopelnik/IdeaProjects/stenciljsnextjs15-ssr/node_modules/@stencil/core/compiler/stencil.js
       Build: 1739293045
     Stencil: 4.26.0 🐇
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

git clone https://github.com/artursopelnik/stenciljsnextjs15-ssr

1
Install all packages on root folder with `npm install``

2
Build projects in package with:

• stencil-library => npm run build
• react-library => npm run build
• react-library-ssr => npm run build

3
Start NextJS
cd ./packages/nextjs15
npm run dev

Code Reproduction URL

https://github.com/artursopelnik/stenciljsnextjs15-ssr

Additional Information

Codesandbox:
https://codesandbox.io/p/github/artursopelnik/stenciljsnextjs15-ssr/main?import=true

[johnjenkins]

Thanks for raising!
For whoever looks at this - It's caused by this line introduced in 4.26.0

[christian-bromann]

We got this reported internally, will take a look!

[artursopelnik]

@johnjenkins
It works without TypeError in 4.25.3 💯

[danielleroux]

@artursopelnik Tested a possible fix #6174, but could no execute the steps from section Steps to Reproduce react-library and react-library-srr is no valid ts project to execute the build task