fix logic bug in unsupported browser header (#365)

* fix logic bug in unsupported browser header

* pin prettier to avoid conflict with storybook 8.4.0

Author: redbugz

CHANGELOG-FRONTIER.md

@@ -1,3 +1,7 @@
+## 8.7.8
+
+- Fix unsupported browser banner logic to avoid errors
+
 ## 8.7.7
 
 - Add in feature detection and unsupported browser banner. Based on the frontier_snow_unsupportedBrowser flag. Uses the unsupportedBrowserHeaderText value from snow.

package-lock.json

@@ -2,9 +2,11 @@ if (Modernizr) {
   const unsupportedBrowserHeader = document.getElementById('unsupported-browser');
   const outdatedFeatures = Object.keys(Modernizr).filter(feature => !Modernizr[feature]);
 
-  if (outdatedFeatures.length > 0 && unsupportedBrowserHeader) {
-    unsupportedBrowserHeader.style.display = 'block';
-  } else {
-    unsupportedBrowserHeader.remove();
+  if (unsupportedBrowserHeader) {
+    if (outdatedFeatures.length > 0) {
+      unsupportedBrowserHeader.style.display = 'block';
+    } else {
+      unsupportedBrowserHeader.remove();
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "@fs/react-scripts",
-  "version": "8.7.7",
+  "version": "8.7.8",
   "upstreamVersion": "5.0.1",
   "description": "Configuration and scripts for Create React App.",
   "repository": {
@@ -96,6 +96,7 @@
     "postcss-loader": "^6.2.1",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.0.1",
+    "prettier": "^1.19.1",
     "prompts": "^2.4.2",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",