gatsby build failing on netlify with throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);

Question

This error did not happen on my build from several months ago, I was on node v14.4.0 which was using npm v6.14.5.

6:09:13 PM: $ gatsby build
6:09:13 PM: internal/modules/cjs/loader.js:1085
6:09:13 PM:       throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
6:09:13 PM:       ^
6:09:13 PM: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /opt/build/repo/node_modules/dot-prop/index.js
6:09:13 PM: require() of ES modules is not supported.
6:09:13 PM: require() of /opt/build/repo/node_modules/dot-prop/index.js from /opt/build/repo/node_modules/configstore/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
6:09:13 PM: Instead rename /opt/build/repo/node_modules/dot-prop/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /opt/build/repo/node_modules/dot-prop/package.json.
6:09:13 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1085:13)
6:09:13 PM:     at Module.load (internal/modules/cjs/loader.js:933:32)
6:09:13 PM:     at Function.Module._load (internal/modules/cjs/loader.js:774:14)
6:09:13 PM:     at Module.require (internal/modules/cjs/loader.js:957:19)
6:09:13 PM:     at require (internal/modules/cjs/helpers.js:88:18)
6:09:13 PM:     at Object.<anonymous> (/opt/build/repo/node_modules/configstore/index.js:8:17)
6:09:13 PM:     at Module._compile (internal/modules/cjs/loader.js:1068:30)
6:09:13 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
6:09:13 PM:     at Module.load (internal/modules/cjs/loader.js:933:32)
6:09:13 PM:     at Function.Module._load (internal/modules/cjs/loader.js:774:14) {
6:09:13 PM:   code: 'ERR_REQUIRE_ESM'
6:09:13 PM: }

Here is the log output for the last build that worked

Here is the log output for the build 1 after the working build. Nothing was updated except for a new image, and a few strings. This build failed.

Both of the above builds had the node version set to v14.4.0

Here is my most recent breaking Netlify log

It happens when this is my package-lock.json

but does not happen when this is my package-lock.json

Even with the working package-lock.json I must use node v14.17.0 and npm v7.20.5 or else I get the same error

---

With the working package-lock.json and working node and npm version, I receive this new error

6:49:50 PM: success Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 144.047s - 675/675 4.69/s
6:49:50 PM: error UNHANDLED EXCEPTION write EPIPE
6:49:50 PM: 
6:49:50 PM: 
6:49:50 PM:   Error: write EPIPE
6:49:50 PM:   
6:49:50 PM:   - child_process.js:839 ChildProcess.target._send
6:49:50 PM:     internal/child_process.js:839:20
6:49:50 PM:   
6:49:50 PM:   - child_process.js:710 ChildProcess.target.send
6:49:50 PM:     internal/child_process.js:710:19
6:49:50 PM:   
6:49:50 PM:   - index.js:298 WorkerPool.sendMessage
6:49:50 PM:     [repo]/[gatsby-worker]/dist/index.js:298:19
6:49:50 PM:   
6:49:50 PM:   - worker-messaging.ts:22 
6:49:50 PM:     [repo]/[gatsby]/src/utils/jobs/worker-messaging.ts:22:22

---

This is my package.json

{
  "name": "suddenly-saskatchewan-magazine-website",
  "private": true,
  "description": "Suddenly Saskachewan Magazine Website",
  "version": "0.1.0",
  "author": "Sam Germain",
  "keywords": [
    "suddenly saskatchewan",
    "saskatchewan"
  ],
  "license": "MIT",
  "scripts": {
    "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "preinstall": "npx npm-force-resolutions",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \"",
    "type-check": "tsc -w"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/samgermain/sudSaskV2.git"
  },
  "bugs": {
    "url": "https://github.com/samgermain/sudSaskV2/issues"
  },
  "resolutions": {
    "dot-prop": ">=5.2.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@loadable/component": "^5.15.2",
    "@pittica/gatsby-plugin-recaptcha": "^2.0.3",
    "@types/react-helmet": "^6.1.5",
    "@types/react-scroll": "^1.8.3",
    "bootstrap": "^5.1.3",
    "core-js": "^3.21.1",
    "emailjs-com": "^3.2.0",
    "gatsby": "^4.11.3",
    "gatsby-background-image": "^1.6.0",
    "gatsby-image": "^3.11.0",
    "gatsby-plugin-create-client-paths": "^4.9.0",
    "gatsby-plugin-google-analytics": "^4.11.0",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-graphql-loader": "^1.0.2",
    "gatsby-plugin-loadable-components-ssr": "^4.2.0",
    "gatsby-plugin-manifest": "^4.11.1",
    "gatsby-plugin-netlify": "^4.2.0",
    "gatsby-plugin-preact": "^6.11.0",
    "gatsby-plugin-preconnect": "^1.3.0",
    "gatsby-plugin-purgecss": "^6.1.2",
    "gatsby-plugin-react-helmet": "^5.11.0",
    "gatsby-plugin-react-svg": "^3.1.0",
    "gatsby-plugin-root-import": "^2.0.8",
    "gatsby-plugin-sass": "^5.11.1",
    "gatsby-plugin-sharp": "^4.11.1",
    "gatsby-plugin-sitemap": "^5.11.1",
    "gatsby-plugin-typescript": "^4.11.1",
    "gatsby-remark-images": "^6.11.1",
    "gatsby-remark-relative-images-v2": "^0.1.5",
    "gatsby-source-filesystem": "^4.11.1",
    "gatsby-transformer-remark": "^5.11.1",
    "gatsby-transformer-sharp": "^4.11.0",
    "graphql-tag": "^2.12.6",
    "jshint": "^2.13.4",
    "node-sass": "^6.0.1",
    "preact": "^10.7.1",
    "preact-render-to-string": "^5.1.21",
    "prop-types": "^15.8.1",
    "query-string": "^7.1.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.2.3",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-scroll": "^1.8.7",
    "resize-observer-polyfill": "^1.5.1",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0"
  }
}

This was my package.json for the last build that worked

---

I am getting the same build error when building on gatsby cloud

---

My site is still using gatsby-image instead of gatsby-plugin-image, I have a branch that I have spent a few hours on trying to switch gatsby-image to gatsby-plugin-image, but it still has problems, so I do not know if this update will fix this issue

---

UPDATE

One random build on netlify worked

Answer 1

error UNHANDLED EXCEPTION write EPIPE

This error is generally related to a timeout response from the server and, depending on some build parameters it may fail or not, that's the reason why it wasn't happening before.

The timeout can appear for multiple reasons (new packages, loss of cache files, hard image processing, etc). In your case, I think it's related to the image processing process. Try removing AVIF (which is CPU-intensive) if you are using it and use the default formats (WEBP and auto).

In the case of the gatsby-plugin-image branch try setting the default options:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        defaults: {
          formats: [`auto`, `webp`],
          placeholder: `dominantColor`,
          quality: 50,
          breakpoints: [750, 1080, 1366, 1920],
          backgroundColor: `transparent`,
          tracedSVGOptions: {},
          blurredOptions: {},
          jpgOptions: {},
          pngOptions: {},
          webpOptions: {},
          avifOptions: {},
        }
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-image`,
  ],
}

In the case of gatsby-image, try using the specific query fragments withWebp.

Another alternative to bypass this CPU-intense work on Netlify's side is using the CDN that Netlify provides to use along with Gatsby images, this will save a lot of time-consuming processes during the building. More details at:

• https://www.netlify.com/blog/gatsby-image-cdn-on-netlify
• https://github.com/netlify/netlify-plugin-gatsby/blob/main/docs/image-cdn.md

If the issue persists, another known working solution is to rollback Gatsby from ^4.11.3 to 4.7.2, locking the version if needed.

A more detailed explanation of the solutions described can be found at:

• https://answers.netlify.com/t/error-unhandled-exception-write-epipe/52650
• https://github.com/netlify/netlify-plugin-gatsby/issues/259

---

As per the dot-drop error, the cause is that in your node_modules or in your code, your dependencies are using both type=module and and without type=module (https://github.com/standard-things/esm/issues/868#issuecomment-586705453). This is caused normally by an upgrade of dependencies or a change of Node version.

Try setting the bundler in the netlify.toml file:

[functions]
  node_bundler = "esbuild"

Source: https://answers.netlify.com/t/getting-must-use-import-to-load-es-module-when-using-node-fetch-in-netlify-functions/47230

Alternatively, add the following line in your package.json:

{
  "type": "module"
}

This essentially enables ES6 modules.

More details can be found at: Why is 'type: module' in package.json file?

Answer 2

Your write EPIPE error is a timeout happening to gatsby v4 builds in Netlify and a workaround is to set GATSBY_CONCURRENT_DOWNLOAD environment variable to 16 (or less) as said in this forum

That should avoid that you reach Netlify memory limit