bug: building Next.js + SSR components - 'ReferenceError: Node is not defined'

[guilhermebc]

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

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.7.1

Current Behavior

I work at a company where we use Stencil for the internal design system and export it to React, as we have projects in Next.js (^14.2.3).

We use version ^0.5.3 of the @stencil/react-output-target package for using the components in Next.js projects and were waiting for the launch of SSR support.

As soon as the SSR components support was released for react-output-target, I went to test updating it in the company's design system, but I am not able to compile the application, I followed all the steps in the Stencil documentation.

Our design system is published in a private repository manager, and we install it in the company's applications (Vue apps, Next.js apps, etc).

➜  nextjs-with-stencil-ssr git:(main) ✗ 
yarn build
yarn build
yarn run v1.22.22
$ next build
  ▲ Next.js 14.2.11

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/5)  [=   ]ReferenceError: Node is not defined
    at ta (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/app/page.js:1:85335)
    at e6 (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/app/page.js:1:83143)
    at td (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/app/page.js:1:86752)
    at 4978 (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/app/page.js:1:91142)
    at Object.t [as require] (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/webpack-runtime.js:1:128)
    at require (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18224)
    at I (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94362)
    at C (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:92913)
    at rP (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:33974)
    at nN (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62304) {
  digest: '1355879404'
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: Node is not defined
    at ta (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/app/page.js:1:85335)
    at e6 (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/app/page.js:1:83143)
    at td (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/app/page.js:1:86752)
    at 4978 (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/app/page.js:1:91142)
    at Object.t [as require] (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/.next/server/webpack-runtime.js:1:128)
    at require (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18224)
    at I (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94362)
    at C (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:92913)
    at rP (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:33974)
    at nN (/Users/guilherme.costa/workspace/nextjs-with-stencil-ssr/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62304)
 ✓ Generating static pages (5/5)

> Export encountered errors on following paths:
        /page: /
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected Behavior

Setup Next.js app router + SSR + Stencil react output target components.server building and working

Steps to Reproduce

Design system repo: https://github.com/guilhermebc/gbc-design-system
Nextjs app + design system repo: https://github.com/guilhermebc/nextjs-with-stencil-ssr

The version @guilhermebc/[email protected] is causing the error.

I ended up discovering that the cause of the error is coming from the extra settings we need to apply for slot correction:
stencil.config.ts

extras: {
    enableImportInjection: true,
    experimentalSlotFixes: true,
    scopedSlotTextContentFix: true,
}

I generated a version @guilhermebc/[email protected] removing these extra settings and the error does not occur, but in any case, we need these settings applied in our internal design system.

To reproduce, just download the repository https://github.com/guilhermebc/nextjs-with-stencil-ssr:
1 - Install the dependencies yarn install
2 - Run build with yarn build

PS: To simulate without the error, just install the version @guilhermebc/[email protected]

Code Reproduction URL

https://github.com/guilhermebc/nextjs-with-stencil-ssr

Additional Information

[ionitron-bot]

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README

[guilhermebc]

up