Error during SSR

[feus4177]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Throws an error during import.

Expected Behavior

No errors are thrown during import.

Reproduction Sample

SSR problem

Reproduction Steps

Setup a default vite 5.1 build with the following added to the vite config

  ssr: {
    noExternal: [
      '@esri/calcite-components',
      '@stencil/core',
    ],
  },

Reproduction Version

2.8.0

Relevant Info

MacOS

ReferenceError: navigator is not defined
    at getUserAgentData (./node_modules/.pnpm/@esri+calcite-components@2.8.0/node_modules/@esri/calcite-components/dist/components/src/utils/browser.ts:9:5)

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

Unable to use calcite-components. Will probably have to use a different library.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

N/A

[geospatialem]

@feus4177 Can you supply a reproduction sample or a scaffolding command for us to diagnose further?

We're currently blocked by a Stencil issue, ionic-team/stencil#4010, so we may be unable to mitigate depending on the instance.

[geospatialem]

@feus4177 Following up if you can supply us with a repro sample to diagnose further.

[feus4177]

@geospatialem, sorry it took so long to get back to you. Here is a repo with a minimal reproduction. From the root directory of the repo, run npm run dev and open up the localhost URL that it prints out.

I now get a slightly different error: ReferenceError: window is not defined. I seem to recall that I was able to get past this (I think by importing from a slightly different path).

The only unusual aspect of my code is the update to the vite.config.js file where I added the

  ssr: {
   noExternal: [
     '@esri/calcite-components',
     '@stencil/core',
   ],
 },

as mentioned above. Without that config, I get an error about importing CommonJS modules from an ES module.

[noahmulfinger]

@benelan @geospatialem I came upon this same issue when trying to use the Custom Elements build in Gatsby, and I created another test repo that might be useful: https://github.com/noahmulfinger/gatsby-calcite-components

It seems that the SSR fails due to two files using browser-only objects:

• navigator used in this file: https://github.com/Esri/calcite-design-system/blob/dev/packages/calcite-components/src/utils/browser.ts
• window used in this file: https://github.com/Esri/calcite-design-system/blob/dev/packages/calcite-components/src/utils/observers.ts

If I remove the references in the two files (and replace them with dummy strings/classes), there are no longer any SSR errors.

[github-actions]

Installed and assigned for verification.

[jcfranco]

Verified locally.