Home
Support Forums

Netlify deploys my site without completing build, entire site broken

Hi,

I deployed my site during development countless times to Netlify, and it always worked like a charm.
Today I’ve implemented Netlify CMS via NPM as React app, and since then Netlify simply terminates Laravel Mix without waiting for it to finish.

The result is that my entire site is broken, css and js assets are 404.

5:04:06 PM: ────────────────────────────────────────────────────────────────
5:04:06 PM:   4. Deploy site                                                
5:04:06 PM: ────────────────────────────────────────────────────────────────
5:04:06 PM: ​
5:04:06 PM: Starting to deploy site from 'dist'
5:04:06 PM: Creating deploy tree 
5:04:06 PM: 1 new files to upload
5:04:06 PM: 0 new functions to upload
5:04:06 PM: Site deploy was successfully initiated
5:04:06 PM: ​
5:04:06 PM: (Deploy site completed in 406ms)
5:04:06 PM: ​
5:04:06 PM: The build completed successfully, but the following processes were still running:
5:04:06 PM: ​
5:04:06 PM:    - node /opt/build/repo/node_modules/.bin/mix --production
5:04:06 PM:    - /bin/sh -c npx webpack --config="node_modules/laravel-mix/setup/webpack.config.js"
5:04:06 PM:    - webpack
5:04:06 PM: ​
5:04:06 PM: These processes have been terminated. In case this creates a problem for your build, refer to this https://answers.netlify.com/t/support-guide-how-to-address-the-warning-message-related-to-terminating-processes-in-builds/35277">article for details about why this process termination happens and how to fix it.
5:04:06 PM: ​
5:04:06 PM: ────────────────────────────────────────────────────────────────
5:04:06 PM:   Netlify Build Complete                                        
5:04:06 PM: ───────────────────────────────────────────────────────────────

My prod script:

{
  "private": true,
  "name": "XXXX",
  "description": "XXXXXX",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/XXXX.git"
  },
  "author": "XXXXX",
  "license": "UNLICENSED",
  "scripts": {
    "help": "npx @11ty/eleventy --help",
    "dev": "npm run clean & ELEVENTY_ENV=development npx @11ty/eleventy --serve --quiet & npx mix watch",
    "debug": "npm run clean & ELEVENTY_ENV=development DEBUG=Eleventy* npx @11ty/eleventy",
    "clean": "rimraf dist/*",
    "prod": "npm run production",
    "production": "mix --production & npx @11ty/eleventy"
  },
  "dependencies": {
    "alpinejs": "^3.1.0",
    "fastdom": "^1.0.10",
    "netlify-cms-app": "^2.15.28",
    "netlify-cms-media-library-cloudinary": "^1.3.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "unfetch": "^4.2.0"
  },
  "devDependencies": {
    "@11ty/eleventy": "^0.12.1",
    "@11ty/eleventy-navigation": "^0.3.2",
    "@babel/preset-react": "^7.14.5",
    "core-js": "^3.15.0",
    "gorko": "^0.4.1",
    "html-minifier": "^4.0.0",
    "laravel-mix": "^6.0.24",
    "laravel-mix-polyfill": "^3.0.1",
    "laravel-mix-purgecss": "^6.0.0",
    "netlify-cli": "^3.38.9",
    "netlify-cms-proxy-server": "^1.3.19",
    "node-html-parser": "^4.1.0",
    "postcss": "^8.3.5",
    "resolve-url-loader": "^4.0.0",
    "rimraf": "^2.7.1",
    "sass-loader": "^12.1.0"
  }
}

My webpack.mix.js

//==========  Laravel Mix  ==========//

const mix = require("laravel-mix");
const path = require("path");
require("laravel-mix-purgecss");
require("laravel-mix-polyfill");

// Run Mix
mix

  .setPublicPath("dist")

  // cleaner aliases for js module imports (optional)
  .webpackConfig({
    resolve: {
      alias: {
        "@utilities": path.resolve(__dirname, "resources/js/utilities"),
        "@modules": path.resolve(__dirname, "resources/js/modules"),
      },
    },
  })

  // Compile Javascript
  .js("resources/js/main.js", "assets/js/")

  // Netlify manual initialization
  .js("site/_cms/index.js", "assets/js/cms.js")
  .react()

  // Compile SCSS
  .sass("resources/scss/main.scss", "assets/css/")
  .options({ processCssUrls: false });

// Production only
if (mix.inProduction()) {
  // Purge our CSS
  mix
    .purgeCss({
      content: ["site/**/*.njk"],
      safelist: [
        "menu-visible",
        "loaded",
        "expanded",
        /^type-/,
        /^page-/,
        /[data-src]/,
      ],
      extractorPattern: [/[^<>"'`\s]*[^<>"'`\s:]/g],
    })
    .polyfill({
      enabled: true,
      debug: false,
      corejs: 3,
      useBuiltIns: "usage",
      targets: "> 0.25%, not dead, IE 11",
    });
}

I’m at a loss what I could do on my end, other than rollback to older version.
It was working the entire time, my only guess is that because I am now using the React app for Netlify CMS directly, webpack takes about 30 seconds to bundle everything… Seems Netlify doesn’t wanna wait so long and just cuts the build process short.

Okay this was a little tricky.

The problem was not any of the obvious candidates, but the amount of ampersands I have (not) used in my package.json lol

Thanks to @tjperry07 Netlify not building all pages during deploy - #4 by tjperry07
I now know that using && in NPM scripts makes both execute one after the other, and wait until both have finished.

Netlify simply waited for one of my two command to finish, and because I am now using React the bundling time has gone up to 30+ seconds… So after 11ty was done, it cancelled everything else and I was left with a broken site.

Boy, what difference a single character sometimes makes…

1 Like

super interesting. glad you found out what was going on, and thanks for sharing the solution!