bug: 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

Hello, 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).

Error:

➜  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 working

Steps to Reproduce

In separate repositories, create a design system (design-system-web-components) in Stencil (^4.21.0)

design-system-web-components

 yarn create stencil

Setup the react-output-target (^0.7.1) para ssr:
stencil.config.ts of design-system-web-components

...
outputTargets: [
    reactOutputTarget({
      outDir: '../nextjs-output-target/src/',
      hydrateModule: 'design-system/hydrate'
    }),
    {
      type: 'dist-custom-elements',
      externalRuntime: false,
    },
    {
      type: 'dist-hydrate-script',
      dir: './hydrate',
    },
]

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "skipLibCheck": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

---

design-system-nextjs

package.json

{
  "name": "design-system-nextjs",
  "version": "1.0.0",
  "type": "module",
  "main": "src/index.js",
  "module": "src/index.js",
  "types": "src/index.d.ts",
  "dependencies": {
    "design-system-web-components": "0.0.1",
    "@stencil/react-output-target": "^0.7.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "react": "^18",
    "react-dom": "^18",
    "typescript": "^5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "outDir": "./dist",
    "lib": ["dom", "es2015"],
    "module": "esnext",
    "moduleResolution": "bundler",
    "target": "es2015",
    "skipLibCheck": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "declarationDir": "./dist",
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Follow all the documentation: https://stenciljs.com/docs/react; Publish the design-system-web-components and design-system-nextjs libraries;

In another repository, create the Next.js application following the standard with App router, TypeScript, ESLint:

npx create-next-app@latest

Install the design-system-nextjs library;
Import a component from the library in app/page.tsx;
Run next build or next dev commands and the error will appear.

Code Reproduction URL

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

[christian-bromann]

@guilhermebc thanks for raising the issue, mind providing a minimal reproduction case as GitHub project? Maybe start with out designsystem boilerplate project and make changes that reproduce this case.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in a Stencil project and provide a way for us to access it (GitHub repo, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

[guilhermebc]

Hey @christian-bromann

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/gbc-design-system-nextjs@1.0.8 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/gbc-design-system-nextjs@1.0.9 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/gbc-design-system-nextjs@1.0.9

Preview:

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a code reproduction. If this is still an issue with the latest version of the output targets, please create a new issue and ensure the template is fully filled out.