Fix NODE_ENV var in browser (#189)

* feat: implement environment detection for NODE_ENV

- Added a new utility module for browser-safe environment detection, exporting the current NODE_ENV value.
- Updated the Application and validation utilities to use the new env module for environment checks instead of directly accessing process.env.

* refactor: update environment detection comment for clarity

- Changed comment in env.ts to better reflect the purpose of the exported variable, clarifying that it represents a browser-safe environment variable.

* changeset

Author: marklundin

.changeset/new-teams-move.md

@@ -0,0 +1,5 @@
+---
+"@playcanvas/react": patch
+---
+
+Ensures the NODE_ENV is compatible in browser only environments. Defaulting to production

packages/lib/src/Application.tsx

@@ -21,6 +21,7 @@ import { validatePropsWithDefaults, createComponentDefinition, Schema, getNullAp
 import { PublicProps } from './utils/types-utils.ts';
 import { GraphicsDeviceOptions, defaultGraphicsDeviceOptions } from './types/graphics-device-options.ts';
 import { DeviceType, internalCreateGraphicsDevice } from './utils/create-graphics-device.ts';
+import { env } from './utils/env.ts';
 
 /**
  * The **Application** component is the root node of the PlayCanvas React API. It creates a canvas element
@@ -281,7 +282,7 @@ componentDefinition.schema = {
      * In test environments, we default to a Null device, because we don't cant use WebGL2/WebGPU.
      * This is just for testing purposes so we can test the fallback logic, without initializing WebGL2/WebGPU.
      */
-    default: process.env.NODE_ENV === 'test' ? [DEVICETYPE_NULL] : [DEVICETYPE_WEBGL2]
+    default: env === 'test' ? [DEVICETYPE_NULL] : [DEVICETYPE_WEBGL2]
   },
   className: {
     validate: (value: unknown) => typeof value === 'string',

packages/lib/src/utils/env.ts

@@ -0,0 +1,6 @@
+/**
+ * Browser safe environment var.
+ */
+export const env = typeof process !== 'undefined' && process?.env?.NODE_ENV
+  ? process.env.NODE_ENV
+  : 'production';

packages/lib/src/utils/validation.ts

@@ -1,14 +1,15 @@
 import { Color, Quat, Vec2, Vec3, Vec4, Mat4, Application, NullGraphicsDevice, Material } from "playcanvas";
 import { getColorFromName } from "./color.ts";
 import { Serializable } from "./types-utils.ts";
+import { env } from "./env.ts";
 
 // Limit the size of the warned set to prevent memory leaks
 const MAX_WARNED_SIZE = 1000;
 const warned = new Set<string>();
 
 export const warnOnce = (message: string) => {
     if (!warned.has(message)) {
-        if (process.env.NODE_ENV !== 'production') {
+        if (env !== 'production') {
 
             // Use setTimeout to break the call stack
             setTimeout(() => {
@@ -73,7 +74,7 @@ export function validateAndSanitize<T, InstanceType>(
 ): T {
     const isValid = value !== undefined && propDef.validate(value);
 
-    if (!isValid && value !== undefined && process.env.NODE_ENV !== 'production') {
+    if (!isValid && value !== undefined && env !== 'production') {
         warnOnce(
             `Invalid prop "${propName}" in \`<${componentName} ${propName}={${JSON.stringify(value)}} />\`\n` +
             `  ${propDef.errorMsg(value)}\n` +
@@ -131,7 +132,7 @@ export function validatePropsPartial<T, InstanceType>(
     });
 
     // Warn about unknown props in development mode
-    if (process.env.NODE_ENV !== 'production' && warnUnknownProps && unknownProps.length > 0) {
+    if (env !== 'production' && warnUnknownProps && unknownProps.length > 0) {
         warnOnce(
             `Unknown props in "<${name}/>."\n` +
             `The following props are invalid and will be ignored: "${unknownProps.join('", "')}"\n\n` +
@@ -183,7 +184,7 @@ export function validatePropsWithDefaults<T extends object, InstanceType>(
 
     // Optionally warn about unknown props
     if (
-      process.env.NODE_ENV !== 'production' &&
+      env !== 'production' &&
       warnUnknownProps &&
       rawProps
     ) {