PCUI isn't importable in ESM/node - Uncaught ReferenceError: navigator is not defined

[kungfooman]

Describe the bug

Right now we cannot load pcui in node.

To Reproduce Steps to reproduce the behavior:

1. npm run build
2. node
3. > await import('./dist/module/src/index.mjs')

Error:

> await import('./dist/module/src/index.mjs')
Uncaught ReferenceError: navigator is not defined
    at file:///var/www/html/playcanvas-ui/dist/module/src/components/SliderInput/index.mjs:10:35
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
    at async REPL8:1:33

Expected behavior

ESM modules should load, no matter what environment they are in to facilitate a wide range of use cases.

Additional context

This error is an issue for: https://github.com/playcanvas/engine/pull/5555

The ESM code is the source of truth without relying on code-duplication and "ignore lists" that fail the entire build process as soon you add another file in any of those dirs.

[willeastcott]

I'm confused. PCUI is not going to be usable in any way in Node without jsdom. I mean, it has a massive reliance on the DOM.

[kungfooman]

I'm confused. PCUI is not going to be usable in any way in Node without jsdom. I mean, it has a massive reliance on the DOM.

The engine examples have code like this (In order to load the controls):

import { BindingTwoWay, LabelGroup, Panel } from '@playcanvas/pcui/react';

The examples are basically mixing UI and PC code, which IMO should be separated JS files, but that's how it evolved in engine /examples/. Now the index.mjs in every example dir is the Source of Truth to get a list of every example without doing "tell me every file in that folder and compare against an ignore list" (which constantly failed when I did some refactoring).

Thank you for trying to follow this :+1: