Error: Cannot find module 'gatsby-plugin-utils/polyfill-remote-file'

Question

Can't run the Gatsby application in a development server.

Attempted solutions:

• attempted to install polyfill-remote-file but the module doesn't even exist
• update node_modules
• delete node_modules and reinstall
• delete package.json and create a new one

I've tried doing the above along with other potential solutions provided on the internet, but nothing has worked so far.

package.json

{
  "name": "slicks-slices-frontend",
  "private": true,
  "description": "Slick Serves the Sweetest Slices",
  "version": "0.1.0",
  "license": "MIT",
  "type": "module",
  "scripts": {
    "//": "⁉️ Hey! This might look confusing but allow me to explain. The command we want to run is called gatsby build. But because we want to use es modules with gatsby, we use a package called esm. One way to require it is to set the NODE_OPTIONS environmental variable to -r esm. Finally to make this work for windows users, we use the cross-env package. Hopefully once Node es modules are stable, we can bring this back to simple gatsby build",
    "build": "cross-env NODE_OPTIONS=\"-r esm\" gatsby build",
    "develop": "cross-env NODE_OPTIONS=\"-r esm\" gatsby develop",
    "start": "npm run develop",
    "serve": "cross-env NODE_OPTIONS=\"-r esm\" gatsby serve",
    "clean": "gatsby clean",
    "netlify": "netlify dev",
    "prebuild": "netlify-lambda install"
  },
  "eslintConfig": {
    "extends": [
      "wesbos"
    ],
    "rules": {
      "react/prop-types": 0
    }
  },
  "dependencies": {
    "babel-plugin-styled-components": "^2.0.7",
    "dotenv": "^16.0.0",
    "gatsby": "^4.13.1",
    "gatsby-image": "^3.11.0",
    "gatsby-plugin-image": "^2.13.0",
    "gatsby-plugin-react-helmet": "^5.13.0",
    "gatsby-plugin-sharp": "^4.13.0",
    "gatsby-plugin-styled-components": "^5.13.0",
    "gatsby-plugin-utils": "^3.8.0",
    "gatsby-source-sanity": "^7.4.2",
    "isomorphic-fetch": "^3.0.0",
    "netlify-cli": "^10.1.0",
    "netlify-lambda": "^2.0.15",
    "normalize.css": "^8.0.1",
    "react": "^18.1.0",
    "react-app-rewired": "^2.2.1",
    "react-dom": "^18.1.0",
    "react-helmet": "^6.1.0",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.14.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-wesbos": "^3.0.2",
    "eslint-plugin-html": "^6.2.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.5.0",
    "esm": "^3.2.25",
    "prettier": "^2.6.2",
    "react-scripts": "^5.0.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/wesbos/slicks-slices"
  }
}

Terminal

Command ran: npm run develop

> [email protected] develop
> cross-env NODE_OPTIONS="-r esm" gatsby develop

/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/utils/start-server.js:1
Error: Cannot find module 'gatsby-plugin-utils/polyfill-remote-file'
Require stack:
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/utils/start-server.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/start-webpack-server.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/index.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/services.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/index.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/commands/develop-process.js
- /Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/.cache/tmp-18549-8YbktIQ65tO1
    at Object.<anonymous> (/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/src/utils/start-server.ts:56:1)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/utils/start-server.js',
    '/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/start-webpack-server.js',
    '/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/services/index.js',
    '/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/services.js',
    '/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/state-machines/develop/index.js',
    '/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/node_modules/gatsby/dist/commands/develop-process.js',
    '/Users/rickymed/Documents/Learning/Software_Development/Practice_Projects/Pizzeria/gatsby/.cache/tmp-18549-8YbktIQ65tO1'
  ]
}

Answer 1

The latest Gatsby supports ESM natively.

Rename your gatsby-node.js to gatsby-node.esm.js, create a new file named gatsby-node.js and add the following

const requireEsm = require('esm')(module);
module.exports = requireEsm('./gatsby-node.esm.js');

Remove NODE_OPTIONS=\"-r esm\" from your scripts.

Take a look at the blogpost for more: https://esausilva.com/2022/05/16/cannot-find-module-gatsby-plugin-utils-polyfill-remote-file/