Home
Support Forums

React app build failed for unknown reasons

PLEASE help us help you by writing a good post!

Hello, I have tried many solutions, including setting Environment CI to false, but I am still failing to succeed in deploying my react app. I would greatly love any help. I’m using 3.js in my app if that is a problem or might cause any issues I don’t know of. Though it runs just fine on my computer.


The better the post - the faster the answer.

below are logs from the failed deployment.

12:53:55 PM: Build ready to start
12:53:57 PM: build-image version: fa439ad1ab9393b2c0d449d8d7c033927683f4b0
12:53:57 PM: build-image tag: v4.3.0
12:53:57 PM: buildbot version: bfa1ece451875e5fe124c5b0a59bb85e0abb8d50
12:53:57 PM: Fetching cached dependencies
12:53:57 PM: Failed to fetch cache, continuing with build
12:53:57 PM: Starting to prepare the repo for build
12:53:57 PM: No cached dependencies found. Cloning fresh repo
12:54:02 PM: Preparing Git Reference refs/heads/master
12:54:03 PM: Parsing package.json dependencies
12:54:03 PM: Starting build script

12:54:04 PM: Computing checksum with sha256sum
12:54:04 PM: Checksums matched!
12:54:07 PM: Now using node v16.9.1 (npm v7.21.1)
12:54:07 PM: Started restoring cached build plugins
12:54:07 PM: Finished restoring cached build plugins
12:54:07 PM: Attempting ruby version 2.7.2, read from environment
12:54:08 PM: Using ruby version 2.7.2
12:54:08 PM: Using PHP version 8.0
12:54:08 PM: Started restoring cached node modules
12:54:08 PM: Finished restoring cached node modules
12:54:09 PM: Installing NPM modules using NPM version 7.21.1
12:54:11 PM: npm WARN old lockfile
12:54:11 PM: npm WARN old lockfile The package-lock.json file was created with an old version of npm,
12:54:11 PM: npm WARN old lockfile so supplemental metadata must be fetched from the registry.
12:54:11 PM: npm WARN old lockfile
12:54:11 PM: npm WARN old lockfile This is a one-time fix-up, please be patient...
12:54:11 PM: npm WARN old lockfile
12:54:33 PM: npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
12:54:33 PM: npm WARN deprecated urix@0.1.0: Please see 
12:54:34 PM: npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
12:54:35 PM: npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic. 
12:54:35 PM: npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic. 
12:54:36 PM: npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
12:54:36 PM: npm WARN deprecated rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
12:54:37 PM: npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
12:54:42 PM: npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now babel/eslint-parser. This package will no longer receive updates.
12:54:43 PM: npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
12:54:43 PM: npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
12:54:44 PM: npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
12:54:45 PM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
12:54:45 PM: npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
12:54:46 PM: npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
12:54:46 PM: npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
12:54:48 PM: npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
12:54:51 PM: npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
12:54:52 PM: added 1929 packages, and audited 1930 packages in 43s
12:54:52 PM: 148 packages are looking for funding
12:54:52 PM:   run `npm fund` for details
12:54:52 PM: 10 moderate severity vulnerabilities
12:54:52 PM: To address issues that do not require attention, run:
12:54:52 PM:   npm audit fix
12:54:52 PM: To address all issues (including breaking changes), run:
12:54:52 PM:   npm audit fix --force
12:54:52 PM: Run `npm audit` for details.
12:54:52 PM: NPM modules installed
12:54:52 PM: Started restoring cached go cache
12:54:52 PM: Finished restoring cached go cache
12:54:52 PM: go version go1.16.5 linux/amd64
12:54:52 PM: go version go1.16.5 linux/amd64
12:54:52 PM: Installing missing commands
12:54:52 PM: Verify run directory
12:54:54 PM: ​
12:54:54 PM: ────────────────────────────────────────────────────────────────
12:54:54 PM:   Netlify Build                                                 
12:54:54 PM: ────────────────────────────────────────────────────────────────
12:54:54 PM: ​
12:54:54 PM: ❯ Version
12:54:54 PM:   @netlify/build 18.8.0
12:54:54 PM: ​
12:54:54 PM: ❯ Flags
12:54:54 PM:   baseRelDir: true
12:54:54 PM:   buildId: 613e5ad349eb74bdda6050e4
12:54:54 PM:   deployId: 613e5ad349eb74bdda6050e6
12:54:54 PM: ​
12:54:54 PM: ❯ Current directory
12:54:54 PM:   /opt/build/repo
12:54:54 PM: ​
12:54:54 PM: ❯ Config file
12:54:54 PM:   No config file was defined: using default values.
12:54:54 PM: ​
12:54:54 PM: ❯ Context
12:54:54 PM:   production
12:54:54 PM: ​
12:54:54 PM: ────────────────────────────────────────────────────────────────
12:54:54 PM:   1. Build command from Netlify app                             
12:54:54 PM: ────────────────────────────────────────────────────────────────
12:54:54 PM: ​
12:54:54 PM: $ CI= npm run build
12:54:54 PM: > react-template-1@0.1.0 build
12:54:54 PM: > react-scripts build
12:54:56 PM: Creating an optimized production build...
12:55:05 PM: Failed to compile.
12:55:05 PM: 
12:55:05 PM: Error: html-webpack-plugin could not minify the generated output.
12:55:05 PM:   In production mode the html minifcation is enabled by default.
12:55:05 PM:   If you are not generating a valid html output please disable it manually.
12:55:05 PM:   You can do so by adding the following setting to your HtmlWebpackPlugin config  :
12:55:05 PM:   |
12:55:05 PM:   |    minify: false
12:55:05 PM:   |
12:55:05 PM:   For parser dedicated bugs please create an issue here:
12:55:05 PM:   Parse Error: <div id="play. "style="background-color: lightsteelblue;" ">                  <button id="darkModes" style="float: right;" type="button" cla  ss="btn btn-info">
12:55:05 PM:   </html>
12:55:05 PM:   - htmlparser.js:244 new HTMLParser
12:55:05 PM:     [repo]/[html-minifier-terser]/src/htmlparser.js:244:13
12:55:05 PM:   - htmlminifier.js:993 minify
12:55:05 PM:     [repo]/[html-minifier-terser]/src/htmlminifier.js:993:3
12:55:05 PM:   - htmlminifier.js:1354 Object.exports.minify
12:55:05 PM:     [repo]/[html-minifier-terser]/src/htmlminifier.js:1354:16
12:55:05 PM:   - index.js:1013 HtmlWebpackPlugin.minifyHtml
12:55:05 PM:     [repo]/[react-scripts]/[html-webpack-plugin]/index.js:1013:46
12:55:05 PM:   - index.js:429 HtmlWebpackPlugin.postProcessHtml
12:55:05 PM:     [repo]/[react-scripts]/[html-webpack-plugin]/index.js:429:40
12:55:05 PM:   - index.js:254
12:55:05 PM:     [repo]/[react-scripts]/[html-webpack-plugin]/index.js:254:25
12:55:05 PM:   - task_queues:96 processTicksAndRejections
12:55:05 PM:     node:internal/process/task_queues:96:5
12:55:05 PM: ​
12:55:05 PM: ────────────────────────────────────────────────────────────────
12:55:05 PM:   "build.command" failed                                        
12:55:05 PM: ────────────────────────────────────────────────────────────────
12:55:05 PM: ​
12:55:05 PM:   Error message
12:55:05 PM:   Command failed with exit code 1: CI= npm run build
12:55:05 PM: ​
12:55:05 PM:   Error location
12:55:05 PM:   In Build command from Netlify app:
12:55:05 PM:   CI= npm run build
12:55:05 PM: ​
12:55:05 PM:   Resolved config
12:55:05 PM:   build:
12:55:05 PM:     command: CI= npm run build
12:55:05 PM:     commandOrigin: ui
12:55:05 PM:     publish: /opt/build/repo/build
12:55:05 PM:     publishOrigin: ui
12:55:05 PM: Caching artifacts
12:55:05 PM: Started saving node modules
12:55:05 PM: Finished saving node modules
12:55:05 PM: Started saving build plugins
12:55:05 PM: Finished saving build plugins
12:55:05 PM: Started saving pip cache
12:55:05 PM: Finished saving pip cache
12:55:05 PM: Started saving emacs cask dependencies
12:55:05 PM: Finished saving emacs cask dependencies
12:55:05 PM: Started saving maven dependencies
12:55:05 PM: Finished saving maven dependencies
12:55:05 PM: Started saving boot dependencies
12:55:05 PM: Finished saving boot dependencies
12:55:05 PM: Started saving rust rustup cache
12:55:05 PM: Finished saving rust rustup cache
12:55:05 PM: Started saving go dependencies
12:55:05 PM: Finished saving go dependencies
12:55:08 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
12:55:08 PM: Creating deploy upload records
12:55:08 PM: Failing build: Failed to build site
12:55:08 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
12:55:08 PM: Finished processing build request in 1m11.118681148s

Hi @ReginHunt

This line in the log indicates the reason minification is failing which is in turn causing your build to fail.

The <div> is invalid as there is an incorrect number of ", and I don’t believe a . is valid in an id value. The <button> is invalid because you have a space in class.

1 Like