Stencil: Gatsby build error ReferenceError: window is not defined

[peterpeterparker]

Stencil version:

= v1.0.0

I'm submitting a:
[X] bug report

Current behavior:
When I try to build a Gastby project where I use a Web Component developed with StencilJS I face the following error at prod build time.

  51 | var NAMESPACE = 'deckdeckgo-lazy-img';
> 52 | var win = window;
     | ^
  53 | var doc = document;
  54 | var plt = {
  55 |     $flags$: 0,


  WebpackError: ReferenceError: window is not defined

  - deckdeckgo-lazy-img-80c68da0.js:52 Module../node_modules/@deckdeckgo/lazy-img/dist/esm/legacy/deckdeckgo-lazy-img-80c68da0.js
    node_modules/@deckdeckgo/lazy-img/dist/esm/legacy/deckdeckgo-lazy-img-80c68da0.js:52:1

  - loader.mjs:1 Module../node_modules/@deckdeckgo/lazy-img/dist/esm/legacy/loader.mjs
    node_modules/@deckdeckgo/lazy-img/dist/esm/legacy/loader.mjs:1:1

I import the component in Gatsby using the loader:

import { defineCustomElements as deckdeckgoLazyImgLoader } from "@deckdeckgo/lazy-img/dist/loader"

deckdeckgoLazyImgLoader(window)

Workaround:
Deferring the import with require once the Gatsby/React components are mounted "solves" the issue. For example https://github.com/peterpeterparker/daviddalbusco.com/blob/d1855fa7b2b326f3fbb2bdabb59ac911f5f4b71f/src/components/layout/layout.js#L26

Steps to reproduce:

git clone https://github.com/peterpeterparker/stencil-imort
cd stencil-import
npm install
npm run build

Related code:

https://github.com/peterpeterparker/stencil-imort

PS

I use one of my component to display the error, if you would like me to create a blank component to displays it, let me know

[4aficiona2]

I assume this is due to the server side context where window is not available when you render / try to render your component. I faced similar issues when trying to render Stencil components with Nuxt.js (SSR).

Still looking for a solution how to server side render Stencil components within a Nuxt.js app.

[macandcheese]

I can confirm the same issue is happening to me when importing into a Gatsby project.
Unfortunately it is inconsistent in its occurrence 😕- sometimes the components would load without a problem, other times the error above would crash the gatsby develop process.

The workaround @peterpeterparker provided worked for me - thanks!

[viljamis]

For anyone looking into this and trying to come up with a way to make Stencil.js components work in Gatsby, I’ve documented one approach to Duet’s component docs that works with any Stencil.js based project: https://www.duetds.com/using-components/#usage-with-gatsby (please keep in mind though that this does not provide SSR for Stencil components, just makes sure they’re only rendered client-side)

[peterpeterparker]

Anyone tried out to integrate components exposed with the stencil-ds-plugins for React, works better?

[viljamis]

@peterpeterparker We’ve done that but still rendering any Stencil components clientside since otherwise you just get “window is not defined” error during build.

"window" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html


  1 | 
  2 | (function() {
> 3 |   if (
    | ^
  4 |     // No Reflect, no classes, no need for shim because native custom elements
  5 |     // require ES2015 classes or Reflect.
  6 |     window.Reflect === undefined ||


  WebpackError: ReferenceError: window is not defined

[viljamis]

@peterpeterparker Looks like this has been now fixed though and might be coming with the --next compiler I assume? See: https://github.com/ionic-team/stencil/blame/b00bed6ea133dcc6e56be18d8f0f7f716e241ae9/src/client/polyfills/es5-html-element.js#L5

[viljamis]

@peterpeterparker A quick update: We tested yesterday using the latest prerelease and this issue is indeed fixed in 1.9.0-14 using the old compiler as well, not just --next. 🥳

[peterpeterparker]

@viljamis awesome that's a great news! thx for the test and feedback 👍
I'll need bit to proceed the same upgrade but I'm definitely looking forward to it :)

[adamdbradley]

🚀