Put react-scripts in dependencies, not devDependencies

packages/create-react-app/createReactApp.js

@@ -276,11 +276,7 @@ function run(
     })
     .then(packageName => {
       checkNodeVersion(packageName);
-
-      // Since react-scripts has been installed with --save
-      // we need to move it into devDependencies and rewrite package.json
-      // also ensure react dependencies have caret version range
-      fixDependencies(packageName);
+      setCaretRangeForRuntimeDeps(packageName);
 
       const scriptsPath = path.resolve(
         process.cwd(),
@@ -497,16 +493,14 @@ function checkAppName(appName) {
   }
 
   // TODO: there should be a single place that holds the dependencies
-  const dependencies = ['react', 'react-dom'];
-  const devDependencies = ['react-scripts'];
-  const allDependencies = dependencies.concat(devDependencies).sort();
-  if (allDependencies.indexOf(appName) >= 0) {
+  const dependencies = ['react', 'react-dom', 'react-scripts'].sort();
+  if (dependencies.indexOf(appName) >= 0) {
     console.error(
       chalk.red(
         `We cannot create a project called ${chalk.green(appName)} because a dependency with the same name exists.\n` +
           `Due to the way npm works, the following names are not allowed:\n\n`
       ) +
-        chalk.cyan(allDependencies.map(depName => `  ${depName}`).join('\n')) +
+        chalk.cyan(dependencies.map(depName => `  ${depName}`).join('\n')) +
         chalk.red('\n\nPlease choose a different project name.')
     );
     process.exit(1);
@@ -533,7 +527,7 @@ function makeCaretRange(dependencies, name) {
   dependencies[name] = patchedVersion;
 }
 
-function fixDependencies(packageName) {
+function setCaretRangeForRuntimeDeps(packageName) {
   const packagePath = path.join(process.cwd(), 'package.json');
   const packageJson = require(packagePath);
 
@@ -543,16 +537,11 @@ function fixDependencies(packageName) {
   }
 
   const packageVersion = packageJson.dependencies[packageName];
-
   if (typeof packageVersion === 'undefined') {
     console.error(chalk.red(`Unable to find ${packageName} in package.json`));
     process.exit(1);
   }
 
-  packageJson.devDependencies = packageJson.devDependencies || {};
-  packageJson.devDependencies[packageName] = packageVersion;
-  delete packageJson.dependencies[packageName];
-
   makeCaretRange(packageJson.dependencies, 'react');
   makeCaretRange(packageJson.dependencies, 'react-dom');
 

packages/react-scripts/scripts/eject.js

@@ -146,24 +146,34 @@ inquirer
 
     console.log(cyan('Updating the dependencies'));
     const ownPackageName = ownPackage.name;
-    if (appPackage.devDependencies[ownPackageName]) {
-      console.log(`  Removing ${cyan(ownPackageName)} from devDependencies`);
-      delete appPackage.devDependencies[ownPackageName];
+    if (appPackage.devDependencies) {
+      // We used to put react-scripts in devDependencies
+      if (appPackage.devDependencies[ownPackageName]) {
+        console.log(`  Removing ${cyan(ownPackageName)} from devDependencies`);
+        delete appPackage.devDependencies[ownPackageName];
+      }
     }
+    appPackage.dependencies = appPackage.dependencies || {};
     if (appPackage.dependencies[ownPackageName]) {
       console.log(`  Removing ${cyan(ownPackageName)} from dependencies`);
       delete appPackage.dependencies[ownPackageName];
     }
-
     Object.keys(ownPackage.dependencies).forEach(key => {
       // For some reason optionalDependencies end up in dependencies after install
       if (ownPackage.optionalDependencies[key]) {
         return;
       }
-      console.log(`  Adding ${cyan(key)} to devDependencies`);
-      appPackage.devDependencies[key] = ownPackage.dependencies[key];
+      console.log(`  Adding ${cyan(key)} to dependencies`);
+      appPackage.dependencies[key] = ownPackage.dependencies[key];
+    });
+    // Sort the deps
+    const unsortedDependencies = appPackage.dependencies;
+    appPackage.dependencies = {};
+    Object.keys(unsortedDependencies).sort().forEach(key => {
+      appPackage.dependencies[key] = unsortedDependencies[key];
     });
     console.log();
+
     console.log(cyan('Updating the scripts'));
     delete appPackage.scripts['eject'];
     Object.keys(appPackage.scripts).forEach(key => {

packages/react-scripts/scripts/init.js

@@ -39,7 +39,6 @@ module.exports = function(
 
   // Copy over some of the devDependencies
   appPackage.dependencies = appPackage.dependencies || {};
-  appPackage.devDependencies = appPackage.devDependencies || {};
 
   // Setup the script rules
   appPackage.scripts = {

tasks/e2e-installs.sh

@@ -55,15 +55,6 @@ function checkDependencies {
    echo "There are extraneous dependencies in package.json"
    exit 1
   fi
-
-
-  if ! awk '/"devDependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \
-  grep -v -q -E '^\s*"react(-dom|-scripts)?"'; then
-   echo "Dev Dependencies are correct"
-  else
-   echo "There are extraneous devDependencies in package.json"
-   exit 1
-  fi
 }
 
 function create_react_app {