Error using calcite components in Gatsby site during server-side rendering

[noahmulfinger]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When using calcite components 1.5.X on a page in a Gatsby site, the page throws an error during server-side rendering error "navigator" is not available during Server-Side Rendering. The stack trace takes me to the interactive.ts file where it is using navigator to check the user agent string:

calcite-design-system/packages/calcite-components/src/utils/interactive.ts

Lines 30 to 36 in bb07831

	const isFirefox = /firefox/i.test(getUserAgentString());
	type ParentElement<T extends HTMLElement = HTMLElement> = T | null;
	const interactiveElementToParent: WeakMap<InteractiveHTMLElement, ParentElement> | null = isFirefox
	? new WeakMap()
	: null;

Expected Behavior

I would expect a server-side rendered page in a Gatsby site (or other static site generator) to be able to render the components without throwing a build error.

Reproduction Sample

See devtopia documentation repo

Reproduction Steps

1. Go to the documentation repo and check out the branch kit12303/update-150
2. Run npm run build:afd
3. After the build gets to the HTML rendering step, it will throw an error.

Reproduction Version

1.5.1

Relevant Info

No response

Regression?

1.4.3

Priority impact

p1 - need for current milestone

Impact

Blocks the developer documentation from being deployed for the 1.5 release.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

ArcGIS Developer Experience

[jcfranco]

After some additional research, I think the crux of this makes it a duplicate of #7486.

The commit that caused the Gatsby SSR build to start failing was 1.5.0-next.9. From the range of commits between 1.5.0-next.8 and 1.5.0-next.9, the change to enable includeImportCustomElements seemed like the most likely culprit. Thanks to @benelan's sleuthing, he confirmed that that feature was adding static imports from the components (where Stencil's isBrowser build flag is always true) output target to be pulled in early in the build process and causing errors about accessing client APIs that aren't available during SSR.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.6.0 with the documentation repo's kit12303/test branch at commit c60a528c0cd56818349301e4a6042f0871260621, only modifying the CC and CCR versions.