diff --git a/packages/calcite-components-react/src/auto-define.ts b/packages/calcite-components-react/src/auto-define.ts
index eb5fb21ed84..235701e957a 100644
--- a/packages/calcite-components-react/src/auto-define.ts
+++ b/packages/calcite-components-react/src/auto-define.ts
@@ -1,11 +1,18 @@
-const isBrowser = (): boolean =>
-  ![typeof window, typeof document, typeof location].includes("undefined") &&
-  [typeof process, typeof global].includes("undefined") &&
-  window.location === location &&
-  window.document === document;
+// CodeSandbox exposes `process`, which makes it look like NodeJS. The only way to determine it should be
+// be treated as the browser is the non-standard value they use for `process.platform`.
+// https://nodejs.org/api/process.html#processplatform
+type CodeSandboxWorkaround = NodeJS.Platform | "browser";
+
+// https://github.com/flexdinesh/browser-or-node/blob/master/src/index.js
+const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined";
+const isNode =
+  typeof process !== "undefined" &&
+  process.versions != null &&
+  process.versions.node != null &&
+  (process?.platform as CodeSandboxWorkaround) !== "browser";
 
 export function autoDefine(component: string): () => Promise<void> | undefined {
-  if (isBrowser()) {
+  if (isBrowser && !isNode) {
     return async () => (await import(`@esri/calcite-components/dist/components/${component}.js`)).defineCustomElement();
   }
   return undefined;