From 4a3d12fbebe7927d599c79dbfc76ebec2841195c Mon Sep 17 00:00:00 2001
From: Michael Mok <pmmmwh@gmail.com>
Date: Sun, 20 Sep 2020 21:02:11 +0800
Subject: [PATCH 1/2] fix: add react-refresh as a dependency for templates

---
 packages/cra-template-typescript/template.json | 1 +
 packages/cra-template/template.json            | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json
index 3aedfc07b19..7168a368493 100644
--- a/packages/cra-template-typescript/template.json
+++ b/packages/cra-template-typescript/template.json
@@ -8,6 +8,7 @@
       "@types/react": "^16.9.49",
       "@types/react-dom": "^16.9.8",
       "@types/jest": "^26.0.13",
+      "react-refresh": "^0.8.3",
       "typescript": "^4.0.2",
       "web-vitals": "^0.2.4"
     },
diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json
index 938dcf30f27..81272c36ee6 100644
--- a/packages/cra-template/template.json
+++ b/packages/cra-template/template.json
@@ -4,6 +4,7 @@
       "@testing-library/jest-dom": "^5.11.4",
       "@testing-library/react": "^11.0.4",
       "@testing-library/user-event": "^12.1.4",
+      "react-refresh": "^0.8.3",
       "web-vitals": "^0.2.4"
     },
     "eslintConfig": {

From 40c7c4d6ac2401eb414ee6e068a074d2fcaacb48 Mon Sep 17 00:00:00 2001
From: Michael Mok <pmmmwh@gmail.com>
Date: Sun, 18 Oct 2020 16:01:12 +0200
Subject: [PATCH 2/2] fix: move react-refresh dep into cra command

---
 .../cra-template-typescript/template.json     |  1 -
 packages/cra-template/template.json           |  1 -
 packages/create-react-app/createReactApp.js   | 21 +++++++++++++++----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json
index 7168a368493..3aedfc07b19 100644
--- a/packages/cra-template-typescript/template.json
+++ b/packages/cra-template-typescript/template.json
@@ -8,7 +8,6 @@
       "@types/react": "^16.9.49",
       "@types/react-dom": "^16.9.8",
       "@types/jest": "^26.0.13",
-      "react-refresh": "^0.8.3",
       "typescript": "^4.0.2",
       "web-vitals": "^0.2.4"
     },
diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json
index 81272c36ee6..938dcf30f27 100644
--- a/packages/cra-template/template.json
+++ b/packages/cra-template/template.json
@@ -4,7 +4,6 @@
       "@testing-library/jest-dom": "^5.11.4",
       "@testing-library/react": "^11.0.4",
       "@testing-library/user-event": "^12.1.4",
-      "react-refresh": "^0.8.3",
       "web-vitals": "^0.2.4"
     },
     "eslintConfig": {
diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
index aac5b33da6a..26aefc61c10 100755
--- a/packages/create-react-app/createReactApp.js
+++ b/packages/create-react-app/createReactApp.js
@@ -158,7 +158,7 @@ function init() {
             'Firefox',
             'Safari',
           ],
-          npmPackages: ['react', 'react-dom', 'react-scripts'],
+          npmPackages: ['react', 'react-dom', 'react-refresh', 'react-scripts'],
           npmGlobalPackages: ['create-react-app'],
         },
         {
@@ -431,7 +431,12 @@ function run(
     getInstallPackage(version, originalDirectory),
     getTemplateInstallPackage(template, originalDirectory),
   ]).then(([packageToInstall, templateToInstall]) => {
-    const allDependencies = ['react', 'react-dom', packageToInstall];
+    const allDependencies = [
+      'react',
+      'react-dom',
+      'react-refresh',
+      packageToInstall,
+    ];
 
     console.log('Installing packages. This might take a couple of minutes.');
 
@@ -476,7 +481,9 @@ function run(
         console.log(
           `Installing ${chalk.cyan('react')}, ${chalk.cyan(
             'react-dom'
-          )}, and ${chalk.cyan(packageInfo.name)}${
+          )}, ${chalk.cyan('react-refresh')}, and ${chalk.cyan(
+            packageInfo.name
+          )}${
             supportsTemplates ? ` with ${chalk.cyan(templateInfo.name)}` : ''
           }...`
         );
@@ -869,7 +876,12 @@ function checkAppName(appName) {
   }
 
   // TODO: there should be a single place that holds the dependencies
-  const dependencies = ['react', 'react-dom', 'react-scripts'].sort();
+  const dependencies = [
+    'react',
+    'react-dom',
+    'react-refresh',
+    'react-scripts',
+  ].sort();
   if (dependencies.includes(appName)) {
     console.error(
       chalk.red(
@@ -924,6 +936,7 @@ function setCaretRangeForRuntimeDeps(packageName) {
 
   makeCaretRange(packageJson.dependencies, 'react');
   makeCaretRange(packageJson.dependencies, 'react-dom');
+  makeCaretRange(packageJson.devDependencies, 'react-refresh');
 
   fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2) + os.EOL);
 }