11

After migrating from Remark to MDX, my builds on Netlify are failing.

I get this error when trying to build:

10:13:28 AM: $ npm run build
10:13:29 AM: > blog-gatsby@0.1.0 build /opt/build/repo
10:13:29 AM: > gatsby build
10:13:30 AM: error Gatsby requires Node.js 14.15.0 or higher (you have v12.18.0).
10:13:30 AM: Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js

Yet when I run node -v in my terminal, it says v17.2.0.

I assume it's not a coincidence that this happened after migrating. Can the problem be because of my node-modules folder? Or is there something in my gatsby-config.js or package.json files I need to change?

My package.json file:

{
  "name": "blog-gatsby",
  "private": true,
  "description": "A starter for a blog powered by Gatsby and Markdown",
  "version": "0.1.0",
  "author": "Magnus Kolstad <kolstadmagnus@gmail.com>",
  "bugs": {
    "url": "https://kolstadmagnus.no"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "gatsby": "^4.3.0",
    "gatsby-plugin-feed": "^4.3.0",
    "gatsby-plugin-gatsby-cloud": "^4.3.0",
    "gatsby-plugin-google-analytics": "^4.3.0",
    "gatsby-plugin-image": "^2.3.0",
    "gatsby-plugin-manifest": "^4.3.0",
    "gatsby-plugin-mdx": "^3.4.0",
    "gatsby-plugin-offline": "^5.3.0",
    "gatsby-plugin-react-helmet": "^5.3.0",
    "gatsby-plugin-sharp": "^4.3.0",
    "gatsby-remark-copy-linked-files": "^5.3.0",
    "gatsby-remark-images": "^6.3.0",
    "gatsby-remark-prismjs": "^6.3.0",
    "gatsby-remark-responsive-iframe": "^5.3.0",
    "gatsby-remark-smartypants": "^5.3.0",
    "gatsby-source-filesystem": "^4.3.0",
    "gatsby-transformer-sharp": "^4.3.0",
    "prismjs": "^1.25.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "typeface-merriweather": "0.0.72",
    "typeface-montserrat": "0.0.75"
  },
  "devDependencies": {
    "prettier": "^2.4.1"
  },
  "homepage": "https://kolstadmagnus.no",
  "keywords": [
    "blog"
  ],
  "license": "0BSD",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
}

What am I doing wrong here?

Update #1

7:11:59 PM: failed Building production JavaScript and CSS bundles - 20.650s
7:11:59 PM: error Generating JavaScript bundles failed
7:11:59 PM: Module build failed (from ./node_modules/url-loader/dist/cjs.js):
7:11:59 PM: Error: error:0308010C:digital envelope routines::unsupported
7:11:59 PM:     at new Hash (node:internal/crypto/hash:67:19)
7:11:59 PM:     at Object.createHash (node:crypto:130:10)
7:11:59 PM:     at getHashDigest (/opt/build/repo/node_modules/file-loader/node_modules/loader-utils/lib/getHashDigest.js:46:34)
7:11:59 PM:     at /opt/build/repo/node_modules/file-loader/node_modules/loader-utils/lib/interpolateName.js:113:11
7:11:59 PM:     at String.replace (<anonymous>)
7:11:59 PM:     at interpolateName (/opt/build/repo/node_modules/file-loader/node_modules/loader-utils/lib/interpolateName.js:110:8)
7:11:59 PM:     at Object.loader (/opt/build/repo/node_modules/file-loader/dist/index.js:29:48)
7:11:59 PM:     at Object.loader (/opt/build/repo/node_modules/url-loader/dist/index.js:127:19)
7:11:59 PM: ​
7:11:59 PM: ────────────────────────────────────────────────────────────────
7:11:59 PM:   "build.command" failed                                        
7:11:59 PM: ────────────────────────────────────────────────────────────────
7:11:59 PM: ​
7:11:59 PM:   Error message
7:11:59 PM:   Command failed with exit code 1: npm run build
7:11:59 PM: ​
7:11:59 PM:   Error location
7:11:59 PM:   In Build command from Netlify app:
7:11:59 PM:   npm run build
7:11:59 PM: ​
7:11:59 PM:   Resolved config
7:11:59 PM:   build:
7:11:59 PM:     command: npm run build
7:11:59 PM:     commandOrigin: ui
7:11:59 PM:     publish: /opt/build/repo/public
7:11:59 PM:     publishOrigin: ui
7:11:59 PM:   plugins:
7:11:59 PM:     - inputs: {}
7:11:59 PM:       origin: ui
7:11:59 PM:       package: '@netlify/plugin-gatsby'
7:11:59 PM:   redirects:
7:12:00 PM:     - from: /api/*
      status: 200
      to: /.netlify/functions/gatsby
    - force: true
      from: https://magnuskolstad.com
      status: 301
      to: https://kolstadmagnus.no
  redirectsOrigin: config
Caching artifacts
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
Magnus Kolstad
  • 407
  • 1
  • 6
  • 17

2 Answers2

22

The problem is that you have Node 17.2.0. locally but in Netlify's environment, you are running a lower version (by default it's not set as 17.2.0). So the local environment is OK, Netlify environment is KO because of this mismatch of Node versions.

When Netlify deploys your site it installs and builds again your dependencies so you should ensure that both environments work under the same conditions. Otherwise, both node_modules will differ so your application will have different behavior or eventually won't even build because of dependency errors.

You can easily play with the Node version in multiple ways but I'd recommend using the .nvmrc file. Just run the following command in the root of your project:

node -v > .nvmrc

This should create a .nvmrc file containing the Node version (node -v) in it. When Netlify finds this file during the build process, it uses it as a base Node version so it installs all the dependencies accordingly.

The file is also useful to tell other contributors which Node version you're using and works along with NVM using nvm use command.

Patrick W. McMahon
  • 3,488
  • 1
  • 20
  • 31
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • 1
    Thanks, this fixed it. Yet now I get this error—though a little further into the build process, obviously. (See the edit on the original post.) – Magnus Kolstad Dec 15 '21 at 22:32
  • 1
    Well this is a complete new issue... Try setting both Node version to the latest LTS (16.13.1). You can use nvm and change manually the `nvmrc` – Ferran Buireu Dec 16 '21 at 05:24
  • 2
    This solved the same problem in Cloudflair Pages!! – Tithos Jan 08 '22 at 02:58
  • 1
    Me too. And the answer is nice and simple. But not easy to find since the error is quite generic. – kometen Jan 23 '22 at 19:32
0

You can also set the Node and NPM versions by adding a netlify.toml file to the root of your website project before committing your build to Netlify:

[build.environment]
    NODE_VERSION = "14.15.0"
    NPM_VERSION = "8.5.5"

Credits : https://www.surinderbhomra.com/Blog/2022/06/16/Netlify-Error-Gatsby-Requires-Node-JS-xxx-or-higher

Yash Vekaria
  • 2,285
  • 24
  • 24