reactjsgatsbyreact-leafletgatsby-cloud

Gatsby Cloud - Build Failing with: WebpackError: /usr/src/app/www/public/render-page.js:4464


I've run into an issue with a build on Gatsby Cloud that's got me stumped, and for which I can't find any information online!

I have a site build that works fine locally (i.e. on my laptop), however when run on Gatsby Cloud consistently results in the following error:

failed Building static HTML for pages - 0.302s
ERROR Building static HTML failed
   5 |   };
   6 |
>  7 |   module.exports["default"] = module.exports, module.exports.__esModule = true;
     |   ^
   8 |   return _setPrototypeOf(o, p);
  10 |
   9 | }
  - setPrototypeOf.js:7 
    [project]/[@babel]/runtime/helpers/setPrototypeOf.js:7:3
  WebpackError: /usr/src/app/www/public/render-page.js:4464
  - utils.js:267 
  - utils.js:103 
    [project]/[@gatsbyjs]/reach-router/lib/utils.js:267:1
    [project]/[@gatsbyjs]/reach-router/lib/utils.js:103:1
  - utils.js:241 
    [project]/[@gatsbyjs]/reach-router/es/lib/utils.js:241:4
  - history.js:48 
    [project]/[@gatsbyjs]/reach-router/lib/utils.js:127:1
  - utils.js:127 
    [project]/[@gatsbyjs]/reach-router/es/lib/history.js:52:1
  - history.js:52 
    [project]/[@gatsbyjs]/reach-router/es/lib/history.js:48:1
  - extends.js:20 
    [project]/[@babel]/runtime/helpers/extends.js:20:1
    [project]/[@gatsbyjs]/reach-router/lib/utils.js:166:1
  - utils.js:166 

not finished Caching HTML renderer compilation - 0.381s
not finished Caching JavaScript and CSS webpack compilation - 11.935s
ERROR Failed to compile: Error: Exited with code 1

Over 3 attempted builds, the file and line number for the webpack error is consistently the same. However as I'm not a web dev (this is a community project I'm volunteering on, where there's no professional web devs) and am really just hacking away on copy-and-paste code... I've hit a wall here and have no idea how to get past this. I'd really appreciate any help please. Especially as, being a community project with a budget of exactly zero, I'm not able to use Gatsby's commercial support here! 🙂

Thanks in advance for ay help anyone can offer


Solution

  • When something builds locally but doesn't in any server environment (Netlify or Gatsby Cloud in this case) it's usually caused by a mismatch of versions between Node environments. In this case, you gave me the clue:

    I have a different Node version locally than is used on Gatsby Cloud; 16.4.0 locally vs. 12.22.1

    This means that you are running different dependency version, causing different behaviors in both environments.

    In Gatsby's Cloud environment, you can customize the Node version by setting the NODE_VERSION environment variable to 16.4.0. That should fix your issue. Because according to the documentation, it defaults to 12:

    NODE_VERSION: Specify the version of Node.js your project should use. For example, NODE_VERSION=10. Defaults to 12.