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: > [email protected] 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 <[email protected]>",
"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?
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
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.