Merge pull request #368 from fs-webdev/rileytb/outdated_browser_feature_update

prevent private field feature check from just erroring out

Author: rileytb

CHANGELOG-FRONTIER.md

@@ -1,3 +1,7 @@
+## 8.7.11
+
+- Feature detection for private class fields was erroring out before running the check, now it will be within `eval` so it will run even if the browser doesn't support it.
+
 ## 8.7.10
 
 - Have jest configuration use browser-resolve for requires in splitio packages. Only affects jest tests, nothing else.

packages/react-scripts/layout/views/partials/featureDetection.ejs

@@ -1,30 +1,24 @@
 if (Modernizr) {
   const unsupportedBrowserHeader = document.getElementById('unsupported-browser');
 
+  <%# Handles Chrome/Edge v84 and lower %>
   Modernizr.addTest('replaceAll', () => {
       return typeof String.prototype.replaceAll === 'function';
   });
 
+  <%# Handles Firefox v90/Safari v15 and lower %>
+  <%# Written with eval because declaring a function with private class fields threw an error outside of the catch %>
   Modernizr.addTest('privateFields', () => {
     try {
-        class Test {
-            #privateField = 42;
-            getPrivateField() {
-                return this.#privateField;
-            }
-        }
-
-        const instance = new Test();
-        return instance.getPrivateField() === 42;
+      eval("class Test { #privateField; }");
+      return true;
     } catch (e) {
-        return false;
+      return false;
     }
   });
 
-  const outdatedFeatures = Object.keys(Modernizr).filter(feature => !Modernizr[feature]);
-
   if (unsupportedBrowserHeader) {
-    if (outdatedFeatures.length > 0) {
+    if (Object.keys(Modernizr).filter(feature => !Modernizr[feature]).length > 0) {
       unsupportedBrowserHeader.style.display = 'block';
     } else {
       unsupportedBrowserHeader.remove();

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fs/react-scripts",
-  "version": "8.7.10",
+  "version": "8.7.11",
   "upstreamVersion": "5.0.1",
   "description": "Configuration and scripts for Create React App.",
   "repository": {