Production Build Randomly Fails #1082
Comments
|
Additional details:
That's all the detail I can think of adding. |
|
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? |
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? |
|
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? |
|
If you ejected in a commit, you could look at the Git history for the last version of Is there anything unusual about the project path? For example does it have any special characters like spaces or parens? |
|
Project path: |
|
Hmm... searching git history is taking too long. Sorry. ); |
|
You can look for commit that created |
|
uh-oh... looks like I immediately ejected, without committing first. ); |
|
I have create-react-app v 0.6.0 installed. |
|
Added repro instructions for people who want to help. |
|
Following up from here: https://twitter.com/_ericelliott/status/800886875003047936 OS: Ubuntu 16.04 x86_64 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 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.htmlI will update after a few more |
|
So I just ran the following 30+ 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 |
|
Sorry, could not reproduce If you have ejected, try to eject newly created app and compare their folders |
Also could not reproduce. |
|
Maybe the app needs to be ejected to reproduce? |
|
I've seen silent failures in |
|
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. |
|
We'll need to figure out which part of the build is so memory hungry. |
|
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 |
|
Hi! Please let us know if this prompts you, thanks! |
|
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. |
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:
build/contents between runsbuild/index.htmlgot generated -- ifbuild/index.htmlis missing, you've reproduced the bugExpected behavior
HTML file should always build.
Actual behavior
Building from scratch,
build/index.htmlintermittently fails to get generated.Environment
Run these commands in the project folder and fill in their results:
npm ls react-scripts(if you haven’t ejected): N/A - I have ejectednode -v: v6.9.1npm -v: 4.0.2create-react-app --version: 0.6.0Then, specify:
Reproducible Demo
Run
create-react-appwith defaults and you'll have it, but you may have to run build a lot to repro the problem.The text was updated successfully, but these errors were encountered: