upgrade to v16.8.0+ react and v3.0.1+ react-scripts

michielbouw · michielbouw · commit 15a860ed8d34 · 2020-05-08T16:35:20.000+03:00
diff --git a/README.md b/README.md
@@ -7,8 +7,8 @@ Starting point for a Typescript, React (v16.8.0-alpha.0), Yarn & Lerna monorepo
 This project is initialized with [Create React App](https://github.com/facebook/create-react-app) consisting of:
 
 - TypeScript
-- React (v16.8.0-alpha.0)
-- react-scripts (react-scripts v2.1.3 from createReactApp)
+- React (v16.8.0)
+- react-scripts (react-scripts v3.0.1+ from createReactApp)
 - react-testing-library (not Enzyme)
 - Yarn Workspaces (multiple packages architecture)
 - Lerna (tool for managing the monorepo packages)
@@ -20,8 +20,8 @@ This project is initialized with [Create React App](https://github.com/facebook/
 
 The project now consists of 3 packages.
 
-- **www**: create-react-app with TypeScript (react v16.8.0-alpha.0, react-scripts v2.1.3)
-- **shared**: react components with TypeScript (react v16.8.0-alpha.0)
+- **www**: create-react-app with TypeScript (react v16.8.0, react-scripts v3.0.1+)
+- **shared**: react components with TypeScript (react v16.8.0)
 - **utils**: shared functions with TypeScript
 
 ## Get Started
diff --git a/package.json b/package.json
@@ -21,21 +21,21 @@
     "clean": "lerna clean"
   },
   "devDependencies": {
-    "@types/jest": "23.3.12",
-    "@types/node": "10.12.18",
-    "@types/react": "^16.7.18",
-    "@types/react-dom": "^16.0.11",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-simple-import-sort": "^5.0.0",
+    "@types/jest": "^25.2.1",
+    "@types/node": "^13.13.5",
+    "@types/react": "^16.8.0",
+    "@types/react-dom": "^16.8.0",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-simple-import-sort": "^5.0.3",
     "lerna": "^3.20.2",
-    "node-sass": "^4.14.0",
+    "node-sass": "^4.14.1",
     "prettier": "^2.0.5",
-    "react": "^16.8.0-alpha.0",
-    "react-dom": "^16.8.0-alpha.0",
-    "react-scripts": "2.1.3",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-scripts": "3.0.1",
     "typescript": "~3.7.2"
   },
   "workspaces": {
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -16,19 +16,19 @@
     "lint:fix": "eslint --fix . --ignore-path ../../.eslintignore --ext ts --ext tsx --ext js --ext jsx"
   },
   "peerDependencies": {
-    "@types/jest": ">=23.3.12",
-    "@types/node": ">=10.12.18",
-    "@types/react": ">=16.7.18",
-    "@types/react-dom": ">=16.0.11",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-simple-import-sort": "^5.0.0",
-    "react": ">=16.8.0-alpha.0",
-    "react-dom": ">=16.8.0-alpha.0",
+    "@types/jest": ">=24.0.0",
+    "@types/node": ">=13.0.0",
+    "@types/react": ">=16.8.0",
+    "@types/react-dom": ">=16.8.0",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-simple-import-sort": "^5.0.3",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
     "typescript": ">=3.7.2"
   },
   "dependencies": {},
   "devDependencies": {}
-}
+}
diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -16,14 +16,14 @@
     "lint:fix": "eslint --fix . --ignore-path ../../.eslintignore --ext ts --ext tsx --ext js --ext jsx"
   },
   "peerDependencies": {
-    "@types/node": ">=10.12.18",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-simple-import-sort": "^5.0.0",
+    "@types/node": ">=13.0.0",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-simple-import-sort": "^5.0.3",
     "typescript": ">=3.7.2"
   },
   "dependencies": {},
   "devDependencies": {}
-}
+}
diff --git a/packages/www/package.json b/packages/www/package.json
@@ -16,30 +16,36 @@
     "lint:fix": "eslint --fix . --ignore-path ../../.eslintignore --ext ts --ext tsx --ext js --ext jsx"
   },
   "peerDependencies": {
-    "@types/jest": ">=23.3.12",
-    "@types/node": ">=10.12.18",
-    "@types/react": ">=16.7.18",
-    "@types/react-dom": ">=16.0.11",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-simple-import-sort": "^5.0.0",
-    "node-sass": ">=4.14.0",
-    "react": ">=16.8.0-alpha.0",
-    "react-dom": ">=16.8.0-alpha.0",
-    "react-scripts": ">=2.1.3",
+    "@types/jest": ">=24.0.0",
+    "@types/node": ">=13.0.0",
+    "@types/react": ">=16.8.0",
+    "@types/react-dom": ">=16.8.0",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-simple-import-sort": "^5.0.3",
+    "node-sass": ">=4.14.1",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-scripts": ">=3.0.1",
     "typescript": ">=3.7.2"
   },
   "dependencies": {},
   "devDependencies": {
     "@web/shared": "*",
     "@web/utils": "*"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }
diff --git a/packages/www/src/App.tsx b/packages/www/src/App.tsx
@@ -2,7 +2,7 @@ import './App.scss';
 
 import { Header } from '@web/shared';
 import { logger } from '@web/utils';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import logo from './logo.svg';
 
@@ -16,7 +16,7 @@ const App = () => {
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <Header>
-          React (v16.8.0-alpha.0), Typescript, Yarn & Lerna Monorepo
+          React (v16.8.0), Typescript, Yarn & Lerna Monorepo
         </Header>
         <p>
           Starting point for a Typescript, React, Yarn & Lerna monorepo project
diff --git a/packages/www/src/react-app-env.d.ts b/packages/www/src/react-app-env.d.ts
diff --git a/packages/www/src/serviceWorker.ts b/packages/www/src/serviceWorker.ts
@@ -8,13 +8,13 @@
 // resources are updated in the background.
 
 // To learn more about the benefits of this model and instructions on how to
-// opt-in, read http://bit.ly/CRA-PWA
+// opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
+    // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
     )
@@ -29,7 +29,7 @@ export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(
-      (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
+      process.env.PUBLIC_URL,
       window.location.href
     );
     if (publicUrl.origin !== window.location.origin) {
@@ -51,7 +51,7 @@ export function register(config?: Config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit http://bit.ly/CRA-PWA'
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
           );
         });
       } else {
@@ -79,7 +79,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // content until all client tabs are closed.
               console.log(
                 'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
               );
 
               // Execute callback
@@ -108,7 +108,9 @@ function registerValidSW(swUrl: string, config?: Config) {
 
 function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
@@ -136,8 +138,12 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
+    navigator.serviceWorker.ready
+      .then(registration => {
+        registration.unregister();
+      })
+      .catch(error => {
+        console.error(error.message);
+      });
   }
 }
diff --git a/yarn.lock b/yarn.lock
