Gatsby build Building production JavaScript and CSS bundles step never complete

[awidjaja]

Description

Describe the issue that you're seeing.

Gatsby build Building production JavaScript and CSS bundles step never completes. Gatsby develop works.

Steps to reproduce

Clear steps describing how to reproduce the issue.

$ gatsby build

Expected result

What should happen?

successful build:

success Building production JavaScript and CSS bundles — 58.017 s
success Building static HTML for pages — 13.414 s — 18/18 6.34 pages/second
info Done building in 180.627 sec

Actual result

What happened.

this never completes and there are no error messages whatsoever

Building production JavaScript and CSS bundles

Environment

  System:
    OS: Linux 4.4 Ubuntu 18.04 LTS (Bionic Beaver)
    CPU: x64        Intel(R) Core(TM) i7-3687U CPU @ 2.10GHz
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 10.6.0 - ~/n/bin/node
    Yarn: 1.9.4 - ~/n/bin/yarn
    npm: 6.3.0 - ~/n/bin/npm
  npmGlobalPackages:
    gatsby-cli: 2.0.0-beta.7

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Blog App`,
    siteStories: {
      title: `Stories of Our Time`,
    },
    siteEvents: {
      title: `Pandas Eating Lots`,
    },
    siteAbout: {
      title: `About CSS Modules`,
    },
  },
  plugins: [
    {
      resolve: 'gatsby-source-airtable',
      options: {
        apiKey: 'keyT4kaMtXoFjjGqh',
        baseId: 'app7Dd4JJ1IwhOgHS',
        tableName: 'cms',
        tableView: 'published',
        queryName: ''
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-remark`,
    `gatsby-plugin-emotion`,
    `gatsby-plugin-react-helmet`,
    {
    resolve: `gatsby-plugin-typography`,
    options: {pathToConfigModule: `src/utils/typography.js`},
    },
  ],
}

package.json:

{
  "name": "blog",
  "description": "Blog Application",
  "version": "0.1.0",
  "dependencies": {
    "emotion": "^9.2.6",
    "emotion-server": "^9.2.6",
    "gatsby": "^2.0.0-beta.67",
    "gatsby-plugin-emotion": "^2.0.0-beta.3",
    "gatsby-plugin-react-helmet": "next",
    "gatsby-plugin-typography": "^2.2.0-beta.3",
    "gatsby-source-filesystem": "^2.0.1-beta.10",
    "gatsby-transformer-remark": "^2.1.1-beta.5",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-emotion": "^9.2.6",
    "react-helmet": "^5.2.0",
    "react-typography": "^0.16.13",
    "remark-html": "^7.0.0",
    "remark-react": "^4.0.3",
    "typography": "^0.16.17",
    "typography-theme-lincoln": "^0.15.11",
    "unified": "^7.0.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "gatsby build"
  },
  "devDependencies": {
    "prettier": "^1.13.7"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

gatsby-node.js:

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `contents` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allAirtable {
          edges {
            node {
              slug
            }
          }
        }
        allMarkdownRemark {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `).then(result => {
      result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
          path: `/events${node.fields.slug}`,
          component: path.resolve(`./src/templates/blog-post.js`),
          context: {
            // Data passed to context is available
            // in page queries as GraphQL variables.
            slug: node.fields.slug,
          },
        })
      })
      result.data.allAirtable.edges.forEach(({ node }) => {
        createPage({
          path: `/stories${node.slug}`,
          component: path.resolve(`./src/templates/air-post.js`),
          context: {
            slug: node.slug
          }
        })
      })
      resolve()
    })
  })
}

gatsby-browser.js: N/A gatsby-ssr.js: N/A

air-post.js:

import React from "react"
import unified from 'unified'
import markdown from 'remark-parse'
import html from 'remark-html'
import { graphql } from "gatsby"
import Layout from "../components/layout-stories"

export default ({ data }) => {
  // console.log(data)
  return (
    <Layout>
      <div>
        <h1>{data.airtable.title}</h1>
        <h5>{data.airtable.published_date}</h5>
        <h5>Written by {data.airtable.author}</h5>
        <img
          src={data.airtable.cover[0].url}
          style={{
            display: 'block',
            marginBottom: '1rem',
            marginTop: '1rem',
            width: '100%',
            height: 'auto'
          }}
          alt=""
        />
        <div
          dangerouslySetInnerHTML={{
            __html: unified()
              .use(markdown)
              .use(html)
              .processSync(data.airtable.story)
          }}
        />
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    airtable(slug: { eq: $slug }) {
      id
      slug
      title
      cover {
        id
        url
      }
      story
      status
      published_date(formatString: "DD MMMM, YYYY")
      author
    }
  }
`

[anantoghosh]

In your gatsby-node.js, try adding a catch after the then function and log any errors

[awidjaja]

@anantoghosh, thanks. As suggested I had added a catch function after then.

There was no errors caught and the build is still stuck.

gatsby-node.js:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

// You can delete this file if you're not using it
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `contents` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allAirtable {
          edges {
            node {
              slug
            }
          }
        }
        allMarkdownRemark {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `)
    .then(result => {
      result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
          path: `/events${node.fields.slug}`,
          component: path.resolve(`./src/templates/blog-post.js`),
          context: {
            // Data passed to context is available
            // in page queries as GraphQL variables.
            slug: node.fields.slug,
          },
        })
      })
      result.data.allAirtable.edges.forEach(({ node }) => {
        createPage({
          path: `/stories${node.slug}`,
          component: path.resolve(`./src/templates/air-post.js`),
          context: {
            slug: node.slug
          }
        })
      })
      resolve()
    })
    .catch((err) => {
      console.log(err)
    })
  })
}

Console output:

$ gatsby build
success open and validate gatsby-config — 0.219 s
success load plugins — 5.846 s
success onPreInit — 46.208 s
success delete html and css files from previous builds — 1.502 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache — 0.773 s
success copy gatsby files — 2.789 s
success onPreBootstrap — 0.085 s
⡀ source and transform nodesfetch all Airtable rows: 2191.225ms
success source and transform nodes — 6.380 s
success building schema — 11.978 s
success createPages — 0.736 s
success createPagesStatefully — 0.694 s
success onPreExtractQueries — 0.007 s
success update schema — 2.554 s
success extract queries from components — 1.980 s
success run graphql queries — 3.375 s — 22/22 6.54 queries/second
success write out page data — 0.226 s
success write out redirect data — 0.024 s
success onPostBootstrap — 0.027 s

info bootstrap finished - 210.088 s

⠁ Building production JavaScript and CSS bundles

gatsby develop was successful

$ gatsby develop
success open and validate gatsby-config — 0.119 s
success load plugins — 4.780 s
success onPreInit — 35.906 s
success delete html and css files from previous builds — 0.711 s
success initialize cache — 0.168 s
success copy gatsby files — 5.766 s
success onPreBootstrap — 0.063 s
⠐ source and transform nodesfetch all Airtable rows: 2170.550ms
success source and transform nodes — 6.375 s
success building schema — 21.135 s
success createPages — 1.502 s
success createPagesStatefully — 5.756 s
success onPreExtractQueries — 0.012 s
success update schema — 7.190 s
success extract queries from components — 6.412 s
success run graphql queries — 2.174 s — 15/15 6.93 queries/second
success write out page data — 0.834 s
success write out redirect data — 0.141 s
success onPostBootstrap — 0.021 s

info bootstrap finished - 239.839 s

 DONE  Compiled successfully in 381335ms                                                                                                                    9:24:24 PM

 I  You can now view your site in the browser running at http://localhost:8000
 I  Your graphql debugger is running at http://localhost:8000/___graphql

You can now view poll in the browser.

  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.

[anantoghosh]

Could you provide a reproducible repo?

[awidjaja]

@anantoghosh , please find below:

https://github.com/awidjaja/gatsby-debug.git

[anantoghosh]

The project did build on my system:

PS D:\Develop\gatsby-debug> yarn build --verbose
yarn run v1.9.2
$ gatsby build --verbose
verbose 2.594 set gatsby_log_level: "verbose"
verbose 2.604 set gatsby_executing_command: "build"
verbose 2.608 loading local command from: D:\Develop\gatsby-debug\node_modules\gatsby\dist\commands\build.js
verbose 11.706 running command: build
success open and validate gatsby-config — 0.027 s
success load plugins — 0.662 s
success onPreInit — 4.122 s
success delete html and css files from previous builds — 0.060 s
success initialize cache — 0.043 s
success copy gatsby files — 0.269 s
success onPreBootstrap — 0.006 s
⠂ source and transform nodesfetch all Airtable rows: 2068.999ms
success source and transform nodes — 2.568 s
success building schema — 1.190 s
success createPages — 0.163 s
success createPagesStatefully — 0.128 s
success onPreExtractQueries — 0.002 s
success update schema — 0.534 s
success extract queries from components — 0.374 s
success run graphql queries — 0.087 s — 7/7 82.18 queries/second
success write out page data — 0.019 s
success write out redirect data — 0.002 s
success onPostBootstrap — 0.002 s

info bootstrap finished - 22.054 s

success Building production JavaScript and CSS bundles — 46.164 s
success Building static HTML for pages — 8.219 s — 12/12 8.18 pages/second
info Done building in 76.462 sec
Done in 76.97s.

---

Try deleting .cache and public folders

[awidjaja]

@anantoghosh , i had tried deleting .cache and public folders a few times, still the same result. I had also reinstalled all the dependencies. Still no success. Is there a way to get some kind of log produced by the build process?

[anantoghosh]

Debugging guide is available at https://next.gatsbyjs.org/docs/debugging/

[awidjaja]

debugging doesn't really help as it gets into very deep dependencies and never come out. :-(

[Chuloo]

Hi @awidjaja have you been able to get this to work? Your reproduction built on my system as well. Try restarting your machine.

[awidjaja]

@Chuloo . @anantoghosh

i wasn't able to get gatsby build to work although gatsby develop worked fine.

Are you running it on the same environment as my PC?

I am running the system below in Windows 10 PC Version 1803 (OS Build 17134.165) and enabling WSL (Windows Subsystem for Linux).

  System:
    OS: Linux 4.4 Ubuntu 18.04 LTS (Bionic Beaver)
    CPU: x64        Intel(R) Core(TM) i7-3687U CPU @ 2.10GHz
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 10.6.0 - ~/n/bin/node
    Yarn: 1.9.4 - ~/n/bin/yarn
    npm: 6.3.0 - ~/n/bin/npm
  npmGlobalPackages:
    gatsby-cli: 2.0.0-beta.7

I am using yarn as the package manager and run the package inside a yarn workspace (monorepo), so all dependencies are hoisted in the top folder.

monorepo/
    packages/
        gatsby-debug/
            ...

If found that if i commented out the line that access data.airtable.story, gatsby build worked, and all other airtable fields showing correctly.

        {/* <div
          dangerouslySetInnerHTML={{
            __html: unified()
              .use(markdown)
              .use(html)
              .processSync(data.airtable.story)
          }}
        /> */}

Note: the data.airtable.story showed correctly in graphiql tool.

[awidjaja]

@Chuloo . @anantoghosh

curious, I tried one of gatsby example project simple-auth and got the same problem.

gatsby develop : OK gatsby build : not OK

So it seems that the problem is not project specific and impacted gatsby beta version.

[Chuloo]

Thanks for that @awidjaja, tried with the simple-auth example, gatsby develop ran whilst it threw this error on gatsby build:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

   5 |
   6 | const PrivateRoute = ({ component: Component, ...rest }) => {
>  7 |   if (!isLoggedIn() && window.location.pathname !== `/app/login`) {
     |                        ^
   8 |     // If we’re not logged in, redirect to the home page.
   9 |     navigate(`/app/login`)
  10 |     return null

  WebpackError: ReferenceError: window is not defined

  - PrivateRoute.js:7 PrivateRoute
    lib/src/components/PrivateRoute.js:7:24

  - react-dom-server.node.production.min.js:26 d
    [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:26:482

  - react-dom-server.node.production.min.js:28 ya
    [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:28:493

  - react-dom-server.node.production.min.js:33 a.render
    [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:33:46

  - react-dom-server.node.production.min.js:32 a.read
    [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:32:246

  - react-dom-server.node.production.min.js:43 renderToString
    [lib]/[react-dom]/cjs/react-dom-server.node.production.min.js:43:1

  - static-entry.js:146 Module../.cache/static-entry.js.__webpack_exports__.default
    lib/.cache/static-entry.js:146:16

  - default-html.js:22 Promise._execute
    lib/.cache/default-html.js:22:13

  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1

  - bootstrap:16 Promise.map.path
    lib/webpack/bootstrap:16:1

  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1

  - bootstrap:50 MappingPromiseArray._promiseFulfilled
    lib/webpack/bootstrap:50:1

  - api-runner-ssr.js:8 MappingPromiseArray.PromiseArray._iterate
    lib/.cache/api-runner-ssr.js:8:1

  - bootstrap:67 MappingPromiseArray.init
    lib/webpack/bootstrap:67:1

package.json

{
  "name": "gatsby-demo-simple-auth",
  "description": "Gatsby demo of simplified authentication flow.",
  "version": "1.0.0",
  "author": "Jason Lengstorf <jason@lengstorf.com>",
  "dependencies": {
    "gatsby": "^2.0.0-beta.87",
    "gatsby-plugin-react-helmet": "next",
    "prop-types": "^15.6.1",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-helmet": "^5.2.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

[KyleAMathews]

Hey, had missed that I'd broken simple-auth's build recently — fixed it in https://github.com/gatsbyjs/gatsby/pull/7175

[awidjaja]

@KyleAMathews , @anantoghosh , @Chuloo ,

Thanks, I have retested simple-auth and gatsby build worked (after adding an empty gatsby-browser.js file).

Will upgrade to the latest gatsby beta version for my app and retest.

[HriBB]

I had a similar issue where build was working on my local machine, but not on the VPS. It usually stopped around Building production JavaScript and CSS bundles. The reason was that node was running out of memory.

Even if I increased it to 4GB it would basically kill my VPS completely

node --max_old_space_size=4096 ./node_modules/.bin/gatsby build

I also had to add some swap, now the build is working in GitLab CI/CD. Server admin beginner here :)

@KyleAMathews it might be worth mentioning this in the docs.

[awidjaja]

could there be memory leak somewhere during the build?

[archilkarchava]

Updating to the latest windows insider build solves the issue for me. I'm using WSL.

[MrToph]

Updating Windows did unfortunately not solve it for me. I have the same problem, the build process is still stuck at ⡀ Building production JavaScript and CSS bundles on Windows 10 WSL Ubuntu 16.

[millette]

@MrToph Does the same site build on another OS?

[MrToph]

@millette Yes, I just built it on Windows.

[talolard]

Deleting ./cache as well as /public solved this for me

[danielo515]

I'm having the same exact problem except that I did not changed anything from the default template. I just bootstraped a project, added one component, tried build and it stuck at building production js and css bundles. Don't know what to try. I tried deleting .cache and public.

I'm on windows 10 under WSL (windows linux subsystem)

[danielo515]

I just tried with Mingw64 and it builds perfectly. Seems to be a bug on WSL.

[jonniebigodes]

@danielo515, i've had mixed results with wsl. For testing out some issues that pop up in here, the issue at hand happens sometimes when the site is extremely big or full of plugins and some other bells and whistles. When it's just to test out some feature, and with that i clone a starter adjust the code and issue the build for production command, it works. Yes takes a bit of time, as the process is quite intensive. Don't forget that wls is not a full blown os, is just some bits and pieces that were mashed together to provide the user a bit of a taste of linux without actually having to install it, either dual booting, or on a virtualized environment. One trick that always worked for me is to chmod 755 the folders beforehand and then issue a build.

[bogdan-calapod]

Hello,

Any news on this issue ? I'm running WSL on Windows 10 1809 and local builds always hang at Building production JavaScript and CSS bundles

Is there any way I can enable a "debug mode" so that at least I could see which command fails ?

Edit: the latest version of gatsby seems to work (2.0.91)

[Alphascythian]

I've suffered from this, for past weeks. It was kinda on and off situation. It doesn't happen on a new, fresh project, but my current one has grown a little. But just today I came to conclusion that setting my laptop to best performance, particularly on battery SOLVED IT.

TLDR: Your PC is weak for the bundles, boost it or get a better one.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[danielo515]

Oh @gatsbybot , thank you for closing a real issue just because nobody is rude enough to bump it every week.

[KyleAMathews]

@danielo515 there doesn't seem to be a reproducible bug on this thread? We need issues with bugs that we can reproduce on our machines before we can fix the bug.

[KyleAMathews]

Would love you to create a github repo with a Gatsby site that fails as you're seeing so we can help you.

[LubomirGeorgiev]

This issue has been fixed in #12636

[jasonlimantoro]

I had a similar issue where build was working on my local machine, but not on the VPS. It usually stopped around Building production JavaScript and CSS bundles. The reason was that node was running out of memory.

Even if I increased it to 4GB it would basically kill my VPS completely

node --max_old_space_size=4096 ./node_modules/.bin/gatsby build

I also had to add some swap, now the build is working in GitLab CI/CD. Server admin beginner here :)

@KyleAMathews it might be worth mentioning this in the docs.

This is also happening in my VPS (4 GB RAM), I have no idea why it always fails during the Building production JavaScript and CSS bundles. Does gatsby build have any server requirements or is it extremely project-dependent?

• Gatsby version: 3.2.1
• Node version: 12.13.0

[DavidTheSimon]

Same started to happen on AWS Amplify on many of our projects just recently. Has anyone had a workaround?

[iamalexblue]

I've suffered from this, for past weeks. It was kinda on and off situation. It doesn't happen on a new, fresh project, but my current one has grown a little. But just today I came to conclusion that setting my laptop to best performance, particularly on battery SOLVED IT.

TLDR: Your PC is weak for the bundles, boost it or get a better one.

Hollly xxx, That works thx.

[ameenSpeakerbox]

Building production JavaScript and CSS bundles

it's not over in 2023 gatsby