gastby build failing during "Building production JavaScript and CSS bundles" step - "Callback was already called"
See original GitHub issueHi all!
First off, I want to say I am huge fan of Gatsby and promise I spent many, many hours Googling and searching before resorting to opening this issue 😁. I have a personal Gatsby + Netlify blog which I have built off of the gatsby-starter-netlify-cms template. NOTE: I am still using Netlify CMS v3.
Description
The build fails when attempting to execute gatsby build
. gatsby develop
works perfectly. It appears to be dying on the “Building production JavaScript and CSS bundles” step. Since I use Netlify, my production build logs are public and give me an easy way to try and bisect any changes that could have caused this issue.
10:43:09 AM: success open and validate gatsby-configs - 0.048s
10:43:10 AM: success load plugins - 1.095s
10:43:10 AM: success onPreInit - 0.004s
10:43:10 AM: success delete html and css files from previous builds - 0.013s
10:43:10 AM: success initialize cache - 0.010s
10:43:10 AM: success copy gatsby files - 0.050s
10:43:10 AM: success onPreBootstrap - 0.011s
10:43:10 AM: success createSchemaCustomization - 0.016s
10:43:10 AM: success source and transform nodes - 0.578s
10:43:11 AM: success building schema - 0.648s
10:43:11 AM: success createPages - 0.095s
10:43:11 AM: success createPagesStatefully - 0.148s
10:43:11 AM: success onPreExtractQueries - 0.001s
10:43:12 AM: success update schema - 0.053s
10:43:12 AM: success extract queries from components - 0.573s
10:43:12 AM: success write out requires - 0.004s
10:43:12 AM: success write out redirect data - 0.001s
10:43:12 AM: success onPostBootstrap - 0.001s
10:43:12 AM: ⠀
10:43:12 AM: info bootstrap finished - 5.980 s
10:43:12 AM: ⠀
10:44:16 AM: error UNHANDLED EXCEPTION Callback was already called.
10:44:16 AM:
10:44:16 AM: Error: Callback was already called.
10:44:16 AM:
10:44:16 AM: - async.js:16 throwError
10:44:16 AM: [repo]/[neo-async]/async.js:16:11
10:44:16 AM:
10:44:16 AM: - async.js:2818
10:44:16 AM: [repo]/[neo-async]/async.js:2818:7
10:44:16 AM:
10:44:16 AM: - task_queues.js:79 processTicksAndRejections
10:44:16 AM: internal/process/task_queues.js:79:11
10:44:16 AM:
10:44:16 AM:
10:44:16 AM: not finished run queries - 63.444s
10:44:16 AM: not finished Building production JavaScript and CSS bundles - 63.404s
11:11:48 AM: Build exceeded maximum allowed runtime
View the full log here - https://app.netlify.com/sites/cocky-jones-987d7f/deploys/5eeb7d2a167a9b3d4238f66a
I am at a loss at this point. The issue seemingly was correlated with my attempt to add Prism.js to my site in this commit https://github.com/DannyAllegrezza/dannyallegrezza.com/commit/4cbb404004d5a44f2d83e3c5f3ba2f4afbdc5a96 If you look at the Deploy log (https://app.netlify.com/sites/cocky-jones-987d7f/deploys/5e6ee69b93e97200088d5ecb) you’ll see that this is the first time this error popped up. I reverted things and the problem persists 😭😭😭
I figure either I uploaded bad data/image, made a bad component (or graphql query) or something similar so I have branched back 10+ commits, cleared the node_modules
folder, fresh npm install followed by gatsby build
and the problem persists. This seemingly just came out of nowhere and I confirmed that this problem happens also on OSX (13 MBP).
The repo is located here: https://github.com/DannyAllegrezza/dannyallegrezza.com - feel free to clone it and try to perform gatsby build
- Last working deploy https://app.netlify.com/sites/cocky-jones-987d7f/deploys/5e6704b70589fa0007142d39 was at this commit https://github.com/DannyAllegrezza/dannyallegrezza.com/commit/1b3ab5958fcfa6e71d64bc8b4400368833a1c966. I have tried to rebase/branch to this commit and run the build command and am still experiencing this error.
I have tried a ton of things at this point:
- Attempt to revert code to old working build
- Attempt to redeploy a working deploy
- Revert packages
- Set Node Version to 12 in Netlify
- Searched the Interwebs! Found these threads but no resolution
- https://stackoverflow.com/questions/59575264/building-gatsby-site-on-netlify-err-callback-was-already-called
- https://github.com/gatsbyjs/gatsby/issues/21977
- https://community.netlify.com/t/first-time-trying-to-deploy-netlify-cms-gatsby-starter-template-fails/12977/8
- https://github.com/netlify-templates/gatsby-starter-netlify-cms/issues/76
Operating System:
Windows 10
Node:v12.16.1
NPM:6.13.4
λ gatsby --version
Gatsby CLI version: 2.12.46
Gatsby version: 2.23.4
Note: this is the Gatsby version for the site at: E:\Code\Github\dannyallegrezza.com
gastby-config.js
module.exports = {
siteMetadata: {
title: 'danny allegrezza\'s blog :: software engineering | cars | life',
description: 'This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.',
},
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-sass',
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/img`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/img`,
name: 'images',
},
},
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
`gatsby-remark-autolink-headers`,
{
resolve: 'gatsby-remark-relative-images',
options: {
name: 'uploads',
},
},
{
resolve: 'gatsby-remark-images',
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 2048,
},
},
{
resolve: 'gatsby-remark-copy-linked-files',
options: {
destinationDir: 'static',
}
}
],
},
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
{
resolve: 'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
options: {
develop: true, // Activates purging in npm run develop
purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
},
}, // must be after other CSS plugins
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
}
gatsby-node.js
const _ = require('lodash');
const path = require('path');
const { createFilePath } = require('gatsby-source-filesystem');
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
// createPage() is going to do just that.. generate out pages from any of our discovered
// markdownRemark nodes
// - blog posts
// - car posts
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions;
return graphql(`
{
allMarkdownRemark(limit: 1000) {
edges {
node {
id
fields {
slug
}
frontmatter {
tags
templateKey
}
}
}
}
}
`).then(result => {
if (result.errors) {
result.errors.forEach(e => console.error(e.toString()));
return Promise.reject(result.errors);
}
const posts = result.data.allMarkdownRemark.edges;
posts.forEach(edge => {
const id = edge.node.id;
createPage({
path: edge.node.fields.slug,
tags: edge.node.frontmatter.tags,
component: path.resolve(
`src/templates/${String(edge.node.frontmatter.templateKey)}.js`
),
// additional data can be passed via context
// passing in the "id" property allows for the GraphQL query to find the associated
// id of the page. See the "cars-page" or "about" page to see how this works
context: {
id,
},
});
})
// Tag pages:
let tags = [];
// Iterate through each post, putting all found tags into `tags`
posts.forEach(edge => {
if (_.get(edge, `node.frontmatter.tags`)) {
tags = tags.concat(edge.node.frontmatter.tags);
}
})
// Eliminate duplicate tags
tags = _.uniq(tags);
// Make tag pages
tags.forEach(tag => {
const tagPath = `/tags/${_.kebabCase(tag)}/`
createPage({
path: tagPath,
component: path.resolve(`src/templates/tags.js`),
context: {
tag,
},
});
});
});
}
// This onCreateNode function will be called by Gatsby whenever a new node is created (or updated)
// We use this API to add the slugs for our markdown pages to MarkdownRemark nodes
// https://www.gatsbyjs.org/tutorial/part-seven/#creating-slugs-for-pages
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions;
fmImagesToRelative(node) // convert image paths for gatsby images
if (node.internal.type === `MarkdownRemark`) {
// The File name of the Markdown file is used as the Slug
// createFilePath() handles finding the parent File node along with creating the slug from the Markdown file..
const slugValue = createFilePath({ node, getNode });
createNodeField({
name: `slug`,
node,
value: slugValue,
});
}
}
package.json
{
"name": "dannyallegrezza.com",
"description": "Example Gatsby, and Netlify CMS project",
"version": "1.1.3",
"author": "Danny Allegrezza",
"dependencies": {
"bulma": "^0.7.5",
"gatsby": "^2.8.6",
"gatsby-cli": "^2.7.0",
"gatsby-image": "^2.1.2",
"gatsby-plugin-netlify": "^2.0.17",
"gatsby-plugin-netlify-cms": "^3.0.18",
"gatsby-plugin-purgecss": "^3.1.1",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sass": "^2.0.11",
"gatsby-plugin-sharp": "^2.1.3",
"gatsby-remark-autolink-headers": "^2.0.16",
"gatsby-remark-copy-linked-files": "^2.0.13",
"gatsby-remark-images": "^3.0.14",
"gatsby-remark-relative-images": "^0.2.3",
"gatsby-source-filesystem": "^2.0.38",
"gatsby-transformer-remark": "^2.3.12",
"gatsby-transformer-sharp": "^2.1.21",
"gatsby-transformer-yaml": "^2.1.12",
"gatsby-transformer-yaml-netlify": "^1.0.0-alpha.1",
"lodash": "^4.17.15",
"lodash-webpack-plugin": "^0.11.4",
"netlify-cms": "^2.9.1",
"node-sass": "^4.12.0",
"parcel-bundler": "^1.12.3",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"uuid": "^3.2.1"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"start": "npm run develop",
"clean": "rimraf .cache public",
"build": "npm run clean && gatsby build",
"develop": "npm run clean && gatsby develop",
"serve": "gatsby serve",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"prettier": "^1.18.2",
"rimraf": "^2.6.2"
}
}
Steps to reproduce
Clone https://github.com/DannyAllegrezza/dannyallegrezza.com
- perform npm install
- install gatsby cli globally
- attempt to run
gatsby build
Expected result
Build should run without errors.
Environment
System:
OS: Windows 10 10.0.18362
CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
Binaries:
Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.12.3 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.17 - /c/Python27/python
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: ^2.8.6 => 2.23.4
gatsby-cli: ^2.7.0 => 2.12.46
gatsby-image: ^2.1.2 => 2.2.40
gatsby-plugin-netlify: ^2.0.17 => 2.1.32
gatsby-plugin-netlify-cms: ^3.0.18 => 3.0.18
gatsby-plugin-purgecss: ^3.1.1 => 3.1.1
gatsby-plugin-react-helmet: ^3.0.12 => 3.1.22
gatsby-plugin-sass: ^2.0.11 => 2.1.28
gatsby-plugin-sharp: ^2.1.3 => 2.4.5
gatsby-remark-autolink-headers: ^2.0.16 => 2.1.24
gatsby-remark-copy-linked-files: ^2.0.13 => 2.1.37
gatsby-remark-images: ^3.0.14 => 3.1.44
gatsby-remark-relative-images: ^0.2.3 => 0.2.3
gatsby-source-filesystem: ^2.0.38 => 2.1.48
gatsby-transformer-remark: ^2.3.12 => 2.6.50
gatsby-transformer-sharp: ^2.1.21 => 2.3.14
gatsby-transformer-yaml: ^2.1.12 => 2.2.24
gatsby-transformer-yaml-netlify: ^1.0.0-alpha.1 => 1.0.0-alpha.1
npmGlobalPackages:
gatsby-cli: 2.12.46
gatsby: 2.1.4
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (4 by maintainers)
Top GitHub Comments
Okay, going to close this. Huge thank you the Gatsby Discord community and @polarathene for the troubleshooting help! It seems like the issue was likely related to my
package-lock.json
lockfile getting in some kind of weird state. The fix ended up being:.cache
andnode_modules
folders were gone)package-lock.json
npm outdated
andnpm-check -u
)It is hard to identify the direct culprit, but ultimately, this seemed to help. I suspect it might have had to do with
gatsby-plugin-netlify-cms
getting bumped to v4 from v3. For anyone interested, the diff is here:https://github.com/DannyAllegrezza/dannyallegrezza.com/pull/10/files
@polarathene can you try upgrading to
gatsby@2.23.7
we fixed at least one case ofUnexpected response from worker: undefined
there