Why would non-updated npm dependencies cause new errors?

Question

I have a gatsby project that built last November locally, and built on Netlify. I tried downloading this project and running it and received the error

  Error: [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/node_modules/dot-prop/index.js
  require() of ES modules is not supported.
  require() of /path/node_modules/dot-prop/index.js from /path/node_modules/configstore/index.js is an ES module file as it is a .j
  s file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
  Instead rename /path/node_modules/dot-prop/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /path/node_modules/dot-prop/package.json.

I changed the value of a string, added a new image, committed and pushed to Github. Netlify automatically attempted a build from the new commit and I received the same error on Netlify. Why would I be receiving these errors now? I didn't update any packages, in my opinion this should build the exact same as it did in November. I really do not want to update any packages, I attempted updating them and there were a bunch of new problems that I didn't want to deal with for this static website that I manage for free for my dads magazine.

Is there a way I can get around not updating my dependencies?

I've tried npm ci and am still getting the same errors

---

My Dependencies

{
  ...
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@loadable/component": "^5.13.1",
    "@pittica/gatsby-plugin-recaptcha": "^1.0.0",
    "@types/react-helmet": "^5.0.11",
    "@types/react-scroll": "^1.5.4",
    "bootstrap": "^4.3.1",
    "core-js": "^3.6.5",
    "emailjs-com": "^2.4.1",
    "gatsby": "^2.24.37",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.4.14",
    "gatsby-plugin-create-client-paths": "^2.3.10",
    "gatsby-plugin-google-analytics": "^2.3.13",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-graphql-loader": "^1.0.2",
    "gatsby-plugin-loadable-components-ssr": "^2.1.0",
    "gatsby-plugin-manifest": "^2.4.22",
    "gatsby-plugin-netlify": "^2.3.11",
    "gatsby-plugin-offline": "^3.2.17",
    "gatsby-plugin-preact": "^4.0.9",
    "gatsby-plugin-preconnect": "^1.1.54",
    "gatsby-plugin-purgecss": "^5.0.0",
    "gatsby-plugin-react-helmet": "^3.3.10",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sass": "^2.3.12",
    "gatsby-plugin-sharp": "^2.6.25",
    "gatsby-plugin-sitemap": "^2.4.4",
    "gatsby-plugin-typescript": "^2.4.17",
    "gatsby-remark-images": "^3.3.25",
    "gatsby-remark-relative-images-v2": "^0.1.5",
    "gatsby-source-filesystem": "^2.3.24",
    "gatsby-transformer-remark": "^2.8.28",
    "gatsby-transformer-sharp": "^2.5.12",
    "graphql-tag": "^2.10.3",
    "jquery": "^3.5.1",
    "jshint": "^2.11.1",
    "node-sass": "^4.12.0",
    "preact": "^10.4.7",
    "preact-render-to-string": "^5.1.10",
    "prop-types": "^15.7.2",
    "query-string": "^6.8.3",
    "react": "^17.0.2",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^17.0.2",
    "react-helmet": "^5.2.1",
    "react-scroll": "^1.7.16",
    "react-share": "^4.1.0",
    "resize-observer-polyfill": "^1.5.1",
    "typescript": "^3.9.0-dev.20200427",
    "webpack": "^4.44.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.18",
    "gatsby-plugin-root-import": "^2.0.5",
    "prettier": "^1.18.2"
  }
  ...
}

---

npm ls dot-prop

suddenly-saskatchewan-magazine-website@0.1.0 /path
├─┬ gatsby-plugin-manifest@2.12.1
│ └─┬ gatsby-core-utils@1.10.1
│   └─┬ configstore@5.0.1
│     └── dot-prop@>=5.2.0 invalid: "^5.2.0" from node_modules/configstore
└─┬ gatsby@2.32.12
  └─┬ optimize-css-assets-webpack-plugin@5.0.4
    └─┬ cssnano@4.1.11
      └─┬ cssnano-preset-default@4.0.8
        ├─┬ postcss-merge-longhand@4.0.11
        │ └─┬ stylehacks@4.0.3
        │   └─┬ postcss-selector-parser@3.1.2
        │     └── dot-prop@>=5.2.0 deduped invalid: "^5.2.0" from node_modules/configstore, "^5.2.0" from node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser, "^5.2.0" from node_modules/stylehacks/node_modules/postcss-selector-parser
        ├─┬ postcss-merge-rules@4.0.3
        │ └─┬ postcss-selector-parser@3.1.2
        │   └── dot-prop@>=5.2.0 invalid: "^5.2.0" from node_modules/postcss-merge-rules/node_modules/postcss-selector-parser
        └─┬ postcss-minify-selectors@4.0.2
          └─┬ postcss-selector-parser@3.1.2
            └── dot-prop@>=5.2.0 deduped invalid: "^5.2.0" from node_modules/configstore, "^5.2.0" from node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser

npm ERR! code ELSPROBLEMS
npm ERR! invalid: dot-prop@>=5.2.0 /path/node_modules/dot-prop
npm ERR! invalid: dot-prop@>=5.2.0 /path/node_modules/postcss-merge-rules/node_modules/dot-prop

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sam/.npm/_logs/2022-04-11T22_26_34_152Z-debug.log

Answer 1

This is happening because of the package dot-prop, one of the transitive dependencies of Gatsby.

As you can see in the dependency graph, the required version is dot-prop@>=5.2.0, where >=5.2.0 actually resolves to the latest version, as long as it is >=5.2.0.

According to the release history of dot-prop, in November 2021, the latest version was 6.0.1, while at this time, the current version is 7.2.0. So if you do a fresh npm install on your project today, you'll get a different version of dot-prop installed than the one you would have installed on November 2021, and that new version seems to be incompatible with the transitive dependencies of Gatsby 2.32.12 (the obvious culprit is this commit, but that's irrelevant).

Now, you have two options to fix this: pin the dot-prop version to 6.0.1 with npm install dot-prop@6.0.1 (quicker) or upgrade Gatsby to a newer version (better).

Incidentally, I recall encountering a similar issue with another common package: minimatch. In that case, they switched the variable declaration syntax from var to const in a minor version bump, between 3.0.4 and 3.0.5, and that broke the compatibility with some old versions of Node.js.