Create-react-app: Production Build Randomly Fails

[ericelliott]

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes.

Description

The html file build randomly fails, leading to a missing HTML file. This happens silently and intermittently.

Repro instructions:

1. Delete the build/ contents between runs
2. Run build
3. Make sure build/index.html got generated -- if build/index.html is missing, you've reproduced the bug
4. Repeat

Expected behavior

HTML file should always build.

Actual behavior

Building from scratch, build/index.html intermittently fails to get generated.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): N/A - I have ejected
2. node -v: v6.9.1
3. npm -v: 4.0.2
4. create-react-app --version: 0.6.0

Then, specify:

1. Operating system: Ubuntu 16.04.1 LTS
2. Browser and version: N/A

Reproducible Demo

Run create-react-app with defaults and you'll have it, but you may have to run build a lot to repro the problem.

[ericelliott]

Additional details:

• I have seen this happen several times on Ubuntu, but I have not seen it happen yet on macOS.
• Changing nothing and running the build again has fixed the problem. When the build fails, I usually try again. I have always been able to get a good build after 2-3 retries.

That's all the detail I can think of adding.

[gaearon]

So the only difference is missing HTML file? Is everything else including JS and CSS in place?

Have you experienced anything similar with other Webpack-based projects on that system?

[gaearon]

npm ls react-scripts (if you haven’t ejected): N/A - I have ejected

Can you check which version you were using before ejecting? Are you confident you have not made any changes to the build script since ejecting which might have introduced the bug?

[ericelliott]

All other files appear to be fine.

I have not experienced anything like it before.

I don't believe I've made any changes to the script. Here's the source if you'd like to diff it:

// Do this as the first thing so that any code reading it knows the right env.
process.env.NODE_ENV = 'production';

// Load environment variables from .env file. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.
// https://github.com/motdotla/dotenv
require('dotenv').config({silent: true});

var chalk = require('chalk');
var fs = require('fs-extra');
var path = require('path');
var filesize = require('filesize');
var gzipSize = require('gzip-size').sync;
var rimrafSync = require('rimraf').sync;
var webpack = require('webpack');
var config = require('../config/webpack.config.prod');
var paths = require('../config/paths');
var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
var recursive = require('recursive-readdir');
var stripAnsi = require('strip-ansi');

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

// Input: /User/dan/app/build/static/js/main.82be8.js
// Output: /static/js/main.js
function removeFileNameHash(fileName) {
  return fileName
    .replace(paths.appBuild, '')
    .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
}

// Input: 1024, 2048
// Output: "(+1 KB)"
function getDifferenceLabel(currentSize, previousSize) {
  var FIFTY_KILOBYTES = 1024 * 50;
  var difference = currentSize - previousSize;
  var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
  if (difference >= FIFTY_KILOBYTES) {
    return chalk.red('+' + fileSize);
  } else if (difference < FIFTY_KILOBYTES && difference > 0) {
    return chalk.yellow('+' + fileSize);
  } else if (difference < 0) {
    return chalk.green(fileSize);
  } else {
    return '';
  }
}

// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
recursive(paths.appBuild, (err, fileNames) => {
  var previousSizeMap = (fileNames || [])
    .filter(fileName => /\.(js|css)$/.test(fileName))
    .reduce((memo, fileName) => {
      var contents = fs.readFileSync(fileName);
      var key = removeFileNameHash(fileName);
      memo[key] = gzipSize(contents);
      return memo;
    }, {});

  // Remove all content but keep the directory so that
  // if you're in it, you don't end up in Trash
  rimrafSync(paths.appBuild + '/*');

  // Start the webpack build
  build(previousSizeMap);

  // Merge with the public folder
  copyPublicFolder();
});

// Print a detailed summary of build files.
function printFileSizes(stats, previousSizeMap) {
  var assets = stats.toJson().assets
    .filter(asset => /\.(js|css)$/.test(asset.name))
    .map(asset => {
      var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
      var size = gzipSize(fileContents);
      var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
      var difference = getDifferenceLabel(size, previousSize);
      return {
        folder: path.join('build', path.dirname(asset.name)),
        name: path.basename(asset.name),
        size: size,
        sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
      };
    });
  assets.sort((a, b) => b.size - a.size);
  var longestSizeLabelLength = Math.max.apply(null,
    assets.map(a => stripAnsi(a.sizeLabel).length)
  );
  assets.forEach(asset => {
    var sizeLabel = asset.sizeLabel;
    var sizeLength = stripAnsi(sizeLabel).length;
    if (sizeLength < longestSizeLabelLength) {
      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
      sizeLabel += rightPadding;
    }
    console.log(
      '  ' + sizeLabel +
      '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
    );
  });
}

// Print out errors
function printErrors(summary, errors) {
  console.log(chalk.red(summary));
  console.log();
  errors.forEach(err => {
    console.log(err.message || err);
    console.log();
  });
}

// Create the production build and print the deployment instructions.
function build(previousSizeMap) {
  console.log('Creating an optimized production build...');
  webpack(config).run((err, stats) => {
    if (err) {
      printErrors('Failed to compile.', [err]);
      process.exit(1);
    }

    if (stats.compilation.errors.length) {
      printErrors('Failed to compile.', stats.compilation.errors);
      process.exit(1);
    }

    console.log(chalk.green('Compiled successfully.'));
    console.log();

    console.log('File sizes after gzip:');
    console.log();
    printFileSizes(stats, previousSizeMap);
    console.log();

    var openCommand = process.platform === 'win32' ? 'start' : 'open';
    var homepagePath = require(paths.appPackageJson).homepage;
    var publicPath = config.output.publicPath;
    if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
      // "homepage": "http://user.github.io/project"
      console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
      console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
      console.log();
      console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
      console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
      console.log();
      console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
      console.log();
      console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
      console.log();
      console.log('    ' + chalk.dim('// ...'));
      console.log('    ' + chalk.yellow('"scripts"') + ': {');
      console.log('      ' + chalk.dim('// ...'));
      console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
      console.log('    }');
      console.log();
      console.log('Then run:');
      console.log();
      console.log('  ' + chalk.cyan('npm') +  ' run deploy');
      console.log();
    } else if (publicPath !== '/') {
      // "homepage": "http://mywebsite.com/project"
      console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
      console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
      console.log();
      console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
      console.log();
    } else {
      // no homepage or "homepage": "http://mywebsite.com"
      console.log('The project was built assuming it is hosted at the server root.');
      if (homepagePath) {
        // "homepage": "http://mywebsite.com"
        console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
        console.log();
      } else {
        // no homepage
        console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
        console.log('For example, add this to build it for GitHub Pages:')
        console.log();
        console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
        console.log();
      }
      console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
      console.log('You may also serve it locally with a static server:')
      console.log();
      console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
      console.log('  ' + chalk.cyan('pushstate-server') + ' build');
      console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:9000');
      console.log();
    }
  });
}

function copyPublicFolder() {
  fs.copySync(paths.appPublic, paths.appBuild, {
    dereference: true,
    filter: file => file !== paths.appHtml
  });
}

How do I check what version I was using before ejecting?

[gaearon]

If you ejected in a commit, you could look at the Git history for the last version of react-scripts you were using.

Is there anything unusual about the project path? For example does it have any special characters like spaces or parens?

[ericelliott]

Project path: /root/my-project

[ericelliott]

Hmm... searching git history is taking too long. Sorry. );

[gaearon]

You can look for commit that created scripts/build.js since you haven't touched it. That commit would be the same one which removed react-scripts from package.json and thus shows its version.

git log scripts/build.js
git show <commit at the top of the log>

[ericelliott]

uh-oh... looks like I immediately ejected, without committing first. );

[ericelliott]

I have create-react-app v 0.6.0 installed.

[ericelliott]

Added repro instructions for people who want to help.

[sean-clayton]

Following up from here: https://twitter.com/_ericelliott/status/800886875003047936

OS: Ubuntu 16.04 x86_64
Kernel: 4.4.0-45-generic

I ran the following

$ npm i -g create-react-app
$ create-react-app --version
create-react-app version: 0.6.0
$ create-react-app my-app
$ cd my-app
$ npm run build
$ rm -rf build/
$ npm run build
$ ls -lah build/

And then this was the result of the ls -lah build/:

total 40K
drwxrwxr-x 5 sean sean 4.0K Nov 21 21:24 static
-rw-rw-r-- 1 sean sean  257 Nov 21 21:24 asset-manifest.json
-rw-rw-r-- 1 sean sean  25K Nov 21 21:24 favicon.ico
-rw-rw-r-- 1 sean sean  378 Nov 21 21:24 index.html

I will update after a few more rm -rfs and npm run builds :+1:

[sean-clayton]

So I just ran the following 30+ times: rm -rf build/ && npm run build && ls -lah build and here's the results of the last one (it is identical to all of the previous 29+ times):

~/c/my-app ❯❯❯ rm -rf build && npm run build && ls -lah build

> [email protected] build /home/sean/code/my-app
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  45.91 KB  build/static/js/main.b21e2074.js
  289 B     build/static/css/main.9a0fe4f1.css

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage": "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may also serve it locally with a static server:

  npm install -g pushstate-server
  pushstate-server build
  open http://localhost:9000

total 48K
drwxrwxr-x 3 sean sean 4.0K Nov 21 21:35 .
drwxrwxr-x 6 sean sean 4.0K Nov 21 21:35 ..
drwxrwxr-x 5 sean sean 4.0K Nov 21 21:35 static
-rw-rw-r-- 1 sean sean  257 Nov 21 21:35 asset-manifest.json
-rw-rw-r-- 1 sean sean  25K Nov 21 21:35 favicon.ico
-rw-rw-r-- 1 sean sean  378 Nov 21 21:35 index.html
~/c/my-app ❯❯❯ 

@ericelliott @gaearon Unfortunately after 30+ tries, I could not reproduce the missing index.html file per the reproduction instructions in the original post. If there is a better way to reproduce, I'll definitely try it out and update if I can :smile_cat:

[ghost]

Sorry, could not reproduce

If you have ejected, try to eject newly created app and compare their folders

[easingthemes]

OS: Kubuntu 14.04
create-react-app --v: 0.6.0
node --v: 6.4.0
npm --v: 3.10.3

Also could not reproduce.
Fresh new app, tried with and without eject.

[ericelliott]

Maybe the app needs to be ejected to reproduce?

[godmar]

I've seen silent failures in npm run build due to out-of-memory conditions on machines with no swap space.
Next time this happens, check your system logs (see my comment in #1133)

[ericelliott]

This is very likely the same issue. I'm trying to run the build on an SSD cloud server, possibly with little or no swap space configured. I'll look into this. Thank you @godmar.

[gaearon]

We'll need to figure out which part of the build is so memory hungry.

[backnotprop]

Reproduced this error on ec2 t2 micro. The only file generated was the favicon 😂.

I mitigated by adding swap space and the build worked out fine. thanks @godmar

[Timer]

Hi! react-scripts v0.9.0 was just released which should show you an error message when this happens; presumably your machine is running out of memory.

Please let us know if this prompts you, thanks!

[Timer]

I'll close this as I've seen issues where webpack complains more loudly when crashing due to an out of memory error.

If this starts happening (newly), try implementing some code-splitting to reduce the memory (and bundle) footprint.