Upgraded to Webpack 5, Netlify build timing out

[matthall8]

Hello all,

I upgraded my React site to Webpack 5 over the weekend and it builds and runs fine locally however it times out when I deploy to Netlify.

My site is: https://www.nomadicdigital.co.uk/

I’ve tried to work through the recommendations on issues but nothing seems to be working.

My build log is:

1:46:13 PM: Waiting for other deploys from your team to complete
1:48:20 PM: Build ready to start
1:48:22 PM: build-image version: 09c2cdcdf242cf2f57c9ee0fcad9d298fad9ad41
1:48:22 PM: build-image tag: v3.5.0
1:48:22 PM: buildbot version: df708c2c221a3345a3fb36b8609ebca30cb2f6c5
1:48:22 PM: Fetching cached dependencies
1:48:22 PM: Starting to download cache of 284.9MB
1:48:24 PM: Finished downloading cache in 1.657286463s
1:48:24 PM: Starting to extract cache
1:48:32 PM: Finished extracting cache in 8.127275406s
1:48:32 PM: Finished fetching cache in 9.897832295s
1:48:32 PM: Starting to prepare the repo for build
1:48:32 PM: Netlify Large Media is enabled, running git commands with GIT_LFS_SKIP_SMUDGE=1
1:48:32 PM: Preparing Git Reference refs/heads/master
1:48:34 PM: Starting build script
1:48:34 PM: Installing dependencies
1:48:34 PM: Python version set to 2.7
1:48:35 PM: Started restoring cached node version
1:48:38 PM: Finished restoring cached node version
1:48:38 PM: Downloading and installing node v13.8.0…
1:48:39 PM: Downloading https://nodejs.org/dist/v13.8.0/node-v13.8.0-linux-x64.tar.xz…
1:48:39 PM: Computing checksum with sha256sum
1:48:39 PM: Checksums matched!
1:48:42 PM: Now using node v13.8.0 (npm v6.13.6)
1:48:42 PM: Started restoring cached build plugins
1:48:42 PM: Finished restoring cached build plugins
1:48:42 PM: Attempting ruby version 2.6.2, read from environment
1:48:43 PM: Using ruby version 2.6.2
1:48:44 PM: Using PHP version 5.6
1:48:44 PM: Started restoring cached node modules
1:48:44 PM: Finished restoring cached node modules
1:48:44 PM: Installing NPM modules using NPM version 6.13.6
1:49:00 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/chokidar/node_modules/fsevents):
1:49:00 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
1:49:00 PM: added 266 packages from 96 contributors, removed 177 packages, updated 174 packages and audited 1445 packages in 15.222s
1:49:00 PM: 68 packages are looking for funding
1:49:00 PM: run npm fund for details
1:49:00 PM: found 0 vulnerabilities
1:49:01 PM: NPM modules installed
1:49:01 PM: Started restoring cached go cache
1:49:03 PM: Finished restoring cached go cache
1:49:03 PM: Installing Go version 1.12
1:49:03 PM: unset GOOS;
1:49:03 PM: unset GOARCH;
1:49:03 PM: export GOROOT=‘/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64’;
1:49:03 PM: export PATH=“/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64/bin:${PATH}”;
1:49:03 PM: go version >&2;
1:49:03 PM: export GIMME_ENV=‘/opt/buildhome/.gimme_cache/env/go1.12.linux.amd64.env’;
1:49:03 PM: go version go1.12 linux/amd64
1:49:03 PM: Installing missing commands
1:49:03 PM: Verify run directory
1:49:04 PM: ​
1:49:04 PM: ┌─────────────────────────────┐
1:49:04 PM: │ Netlify Build │
1:49:04 PM: └─────────────────────────────┘
1:49:04 PM: ​
1:49:04 PM: ❯ Version
1:49:04 PM: @netlify/build 5.2.1
1:49:04 PM: ​
1:49:04 PM: ❯ Flags
1:49:04 PM: deployId: 5fb282a5535675000823cf2b
1:49:04 PM: mode: buildbot
1:49:04 PM: ​
1:49:04 PM: ❯ Current directory
1:49:04 PM: /opt/build/repo
1:49:04 PM: ​
1:49:04 PM: ❯ Config file
1:49:04 PM: No config file was defined: using default values.
1:49:04 PM: ​
1:49:04 PM: ❯ Context
1:49:04 PM: production
1:49:04 PM: ​
1:49:04 PM: ┌───────────────────────────────────┐
1:49:04 PM: │ 1. Build command from Netlify app │
1:49:04 PM: └───────────────────────────────────┘
1:49:04 PM: ​
1:49:04 PM: $ npm run build
1:49:04 PM: > nomadicdigital@1.0.0 build /opt/build/repo
1:49:04 PM: > webpack --config webpack.prod.js && ps auxw ; false
1:49:05 PM: (node:1485) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
1:49:09 PM: (node:1485) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
1:49:15 PM: (node:1485) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
1:49:15 PM: [webpack-cli] Compilation finished
1:49:15 PM: Webpack Bundle Analyzer is started at http://127.0.0.1:8888
1:49:15 PM: Use Ctrl+C to close it
1:49:15 PM: assets by path *.png 1.77 KiB 14 assets
1:49:15 PM: asset app.bundle.js 201 KiB [emitted] [minimized] (name: app) 1 related asset
1:49:15 PM: asset index.html 235 bytes [emitted]
1:49:15 PM: asset cb7988065031ac948b2ae9e66d7598d0.jpg 132 bytes [emitted] [immutable] [from: client/images/desktop_headerbg.jpg] (auxiliary name: app)
1:49:15 PM: orphan modules 121 KiB [orphan] 41 modules
1:49:15 PM: runtime modules 1.7 KiB 5 modules
1:49:15 PM: cacheable modules 276 KiB
1:49:15 PM: modules by path ./node_modules/emailjs-com/source/ 5.23 KiB 3 modules
1:49:15 PM: modules by path ./node_modules/prop-types/ 2.58 KiB 3 modules
1:49:15 PM: modules by path ./node_modules/react/ 6.48 KiB 2 modules
1:49:15 PM: modules by path ./node_modules/react-dom/ 119 KiB
1:49:15 PM: ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
1:49:15 PM: ./node_modules/react-dom/cjs/react-dom.production.min.js 118 KiB [built] [code generated]
1:49:15 PM: modules by path ./node_modules/scheduler/ 4.91 KiB
1:49:15 PM: ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
1:49:15 PM: ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
1:49:15 PM: modules by path ./node_modules/react-is/ 2.69 KiB
1:49:15 PM: ./node_modules/react-is/index.js 196 bytes [built] [code generated]
1:49:15 PM: ./node_modules/react-is/cjs/react-is.production.min.js 2.5 KiB [built] [code generated]
1:49:15 PM: webpack 5.4.0 compiled successfully in 8969 ms
2:18:27 PM: Build exceeded maximum allowed runtime

My Package.json

{
“name”: “nomadicdigital”,
“version”: “1.0.0”,
“description”: “Agency site for Nomadic Digital”,
“main”: “index.js”,
“scripts”: {
“test”: “echo "Error: no test specified" && exit 1”,
“start”: “webpack serve --config webpack.dev.js”,
“build”: “webpack --config webpack.prod.js && ps auxw ; false”
},
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“@babel/core”: “^7.12.3”,
“@babel/plugin-proposal-class-properties”: “^7.12.1”,
“@babel/plugin-proposal-object-rest-spread”: “^7.12.1”,
“@babel/preset-env”: “^7.12.1”,
“@babel/preset-react”: “^7.12.5”,
“@webpack-cli/serve”: “^1.1.0”,
“babel-core”: “^6.26.3”,
“babel-loader”: “^8.2.1”,
“babel-plugin-transform-object-rest-spread”: “^6.26.0”,
“babel-preset-env”: “^1.7.0”,
“babel-preset-react”: “^6.24.1”,
“clean-webpack-plugin”: “^3.0.0”,
“compression-webpack-plugin”: “^6.1.1”,
“copy-webpack-plugin”: “^6.3.1”,
“css-loader”: “^5.0.1”,
“file-loader”: “^6.2.0”,
“html-webpack-plugin”: “^5.0.0-alpha.10”,
“image-webpack-loader”: “^7.0.1”,
“json-minimizer-webpack-plugin”: “^2.0.0”,
“style-loader”: “^2.0.0”,
“terser-webpack-plugin”: “^5.0.3”,
“webpack”: “^5.4.0”,
“webpack-bundle-analyzer”: “^4.1.0”,
“webpack-cli”: “^4.2.0”,
“webpack-dev-middleware”: “^4.0.2”,
“webpack-dev-server”: “^3.11.0”,
“webpack-merge”: “^5.4.0”
},
“dependencies”: {
“emailjs-com”: “^2.6.3”,
“leaflet”: “^1.7.1”,
“react”: “^17.0.1”,
“react-dom”: “^17.0.1”,
“react-helmet”: “^6.1.0”,
“react-leaflet”: “^3.0.2”,
“react-side-effect”: “^2.1.1”,
“styled-components”: “^5.2.1”
},
“repository”: {
“type”: “git”,
“url”: “git+https://github.com/matthall8/nomadicdigital.git”
},
“bugs”: {
“url”: “Issues · matthall8/nomadicdigital · GitHub”
},
“homepage”: “GitHub - matthall8/nomadicdigital: Website of digital agency run from across the world”
}

webpack.common.js file:

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const TerserPlugin = require(‘terser-webpack-plugin’);
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin;
const JsonMinimizerPlugin = require(“json-minimizer-webpack-plugin”);
const path = require(‘path’);

module.exports = {
entry: {
app: ‘./src/index.js’,
},
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘dist’),
},
module: {
rules: [
{
test: /.json/i,
type: “javascript/auto”,
use: [
{
loader: “file-loader”,
options: {
name: “[name].[ext]”,
},
},
],
},
{
test: /.m?js$/,
exclude: /(node_modules|bower_components)/,
use: ‘babel-loader’,
},
{
test: /.(png|jpe?g|gif)$/i,
use: [
‘file-loader’,
{
loader: ‘image-webpack-loader’,
options: {
mozjpeg: {
progressive: true,
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
],
},
{
test: /.css$/i,
use: [‘style-loader’, ‘css-loader’],
},
],
},
plugins: [
new BundleAnalyzerPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: ‘Production’,
template: ‘./src/index.html’
}),
],
optimization: {
minimize: true,
minimizer: [new TerserPlugin(),new JsonMinimizerPlugin()],
},
};

My webpack.prod.js file:

const { merge } = require(‘webpack-merge’);

const common = require(‘./webpack.common.js’);

module.exports = merge(common, {
mode: ‘production’,
});

My .babelrc file:

{
“presets”:[
“@babel/preset-env”,
“@babel/preset-react”],
“plugins”: [“@babel/plugin-proposal-object-rest-spread”, “@babel/plugin-proposal-class-properties”]
}

My build settings:

Please let me know if you need any further details.

[matthall8]

Can anyone help on this? Still having the issue.

[matthall8]

One final bump to see if anyone can help on this. Still having the issue. Any support would be much appreciated.

[hrishikesh]

Well, I’m not super skilled with Webpack, but, I went ahead and tried your code. While it builds in a matter of seconds, it seems like it’s the analyser that’s causing the issue. Was the analyser present in Webpack 4 too? Maybe, if you can find a way to stop it, the build will work.

EDIT: I changed your npm run build to just: webpack --config webpack.prod.js (I don’t know what the part after that does) and changed line 71 of webpack.common.js to:

  new BundleAnalyzerPlugin({
    analyzerMode: 'disabled',
  }),

My build is exiting locally, should work on Netlify too.

[matthall8]

That worked thank you very much!

I tried removing the BundleAnalyzerPlugin when debugging but perhaps it was the issue in conjunction with the npm run build.

Thanks again for your help.

[hrishikesh]

Wow, seems like a miracle to myself. I read the post when you first posted and thought this was out of my league, someone else will answer. Apologies for keeping you waiting for a week!

[luke]

Hi, @matthall8 and @hrishikesh. It seems like the BundleAnalyzerPlugin was creating a background process which wasn’t exiting. This will create a “stuck build” and there is more about this in the following support guide:

[Support Guide] Hung or stuck, but seemingly successful build

Last review by Netlify Support Team on December 2022 When a deploy gets stuck with no apparent build failure, it typically means that while our robots did start building your code, it didn’t wrap up some process within the 15 minute time limit our build environment requires. Why can this happen? More on that in a sec, but first I want to mention that our build environment requires all processes, not just the main ones started by your build to complete. If even one thing gets stuck, the proces…

Thank you for sharing your solution here and hopefully the support guide will helpful as well.

[matthall8]

Thanks, @luke - I read that article, which was the trigger for removing the BundleAnalyzerPlugin as part of my debugging process but that didn’t seem to solve it. Odd. Anyway, hope the information above is useful for others.

Thanks again @hrishikesh