Put react-scripts in dependencies, not devDependencies (facebook#2657)

* Put react-scripts in dependencies, not devDependencies * Sort dependencies on eject * Remove CI check

Author: gaearon

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 {