fixes aws-amplify#4243 aws-amplify#4576 aws-amplify#4599 Correctly id…

…entify the nodejs environment. (aws-amplify#4611)

* fixes aws-amplify#4243 aws-amplify#4576 aws-amplify#4599 Correctly identify the nodejs environment.

* Fix typo in function signature

* Revert back the function type from arrow function to traditional one

* Add unit tests to test the runtime environment detection on built bundles

* Fix a small typo

Co-authored-by: Eric Clemmons <[email protected]>

packages/core/__tests__/JS-browser-runtime-test.ts

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/** The doc block above is to change the running environment of Jest to
+ * jsdom (which is also the default) Since this is allowed per test file
+ * and not per test or describe, we have two tests, one for node and other for browser
+ */
+import * as core from '../dist/aws-amplify-core.js';
+
+describe('JS browserOrNode build test', () => {
+	test('when its browser ', () => {
+		expect(core.JS.browserOrNode()).toStrictEqual({
+			isBrowser: true,
+			isNode: false,
+		});
+	});
+});

packages/core/__tests__/JS-node-runtime-test.ts

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment node
+ */
+
+/** The doc block above is to change the running environment of Jest to node.
+ * Since this is allowed per test file and not per test or describe, we have
+ * two tests, one for node and other for browser
+ */
+import * as core from '../dist/aws-amplify-core.js';
+
+describe('JS build test', () => {
+	test('when its node ', () => {
+		expect(core.JS.browserOrNode()).toStrictEqual({
+			isBrowser: false,
+			isNode: true,
+		});
+	});
+});

packages/core/src/JS.ts

@@ -165,17 +165,26 @@ export default class JS {
 		return result;
 	}
 
+	/**
+	 * Webpack adds node shim to the bundle overriding the `process` variable
+	 * causing issues detecting nodejs environment. Creating a new function will
+	 * help to avoid incorrect environment detection as new function will have
+	 * it's `this` binded to global scope. Credit: https://stackoverflow.com/a/31090240
+	 */
 	static browserOrNode() {
-		const isBrowser =
-			typeof window !== 'undefined' && typeof window.document !== 'undefined';
-		const isNode =
-			typeof process !== 'undefined' &&
-			process.versions != null &&
-			process.versions.node != null;
+		// function to check if the global scope is "window"
+		const isBrowser = new Function(
+			'try {return this===window;}catch(e){ return false;}'
+		);
+
+		// function to test if global scope is binded to "global"
+		const isNode = new Function(
+			'try {return this===global;}catch(e){return false;}'
+		);
 
 		return {
-			isBrowser,
-			isNode,
+			isBrowser: isBrowser(),
+			isNode: isNode(),
 		};
 	}