"WebpackError: ReferenceError: fetch is not defined" while building

[ininahazwe]

Hi,

I'm new at using Gatsby. I'm trying to build my app which has firebase, in vain. Here below the error display in the terminal. Anyone knows what to do?

Thanks

failed Building static HTML for pages - 1.508s
error Building static HTML failed

662 | * limitations under the License.
663 | */
664 | registerFunctions(firebase, fetch.bind(self));
| ^
665 | firebase.registerVersion(name, version);
666 | //# sourceMappingURL=index.esm.js.map
667 |
WebpackError: ReferenceError: fetch is not defined

package.json infos

{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews [email protected]",
"dependencies": {
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"babel-plugin-styled-components": "^1.12.0",
"babel-preset-gatsby": "^0.12.1",
"emailjs-com": "^2.6.4",
"firebase": "^8.2.7",
"framer-motion": "^3.3.0",
"gatsby": "^2.32.3",
"gatsby-image": "^2.11.0",
"gatsby-plugin-anchor-links": "^1.2.1",
"gatsby-plugin-fontawesome-css": "^1.0.0",
"gatsby-plugin-manifest": "^2.12.0",
"gatsby-plugin-offline": "^3.10.0",
"gatsby-plugin-react-helmet": "^3.10.0",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-sass": "^3.2.0",
"gatsby-plugin-sharp": "^2.14.1",
"gatsby-plugin-styled-components": "^3.10.0",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-source-filesystem": "^2.11.0",
"gatsby-transformer-sharp": "^2.12.0",
"gsap": "^3.6.0",
"joi": "^17.3.0",
"node-fetch": "^2.6.1",
"node-sass": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-google-recaptcha": "^2.1.0",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"react-motion": "^0.5.2",
"react-native-fetch": "^2.0.0",
"react-native-firebase": "^5.6.0",
"react-scroll": "^1.8.1",
"smooth-scrollbar": "^8.6.0",
"styled-components": "^5.2.1"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.12.13",
"jetifier": "^1.6.6",
"prettier": "2.2.1",
"react-router-dom": "^5.2.0"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write "**/*.{js,jsx,ts,tsx,json,md}"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo "Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}

[herecydev]

Gatsby is trying to server-side render your code, fetch is not implemented in nodejs. So that's why the issue is present.

It's not clear why your pages are calling that code, but admittedly I've never used firebase.

[nibtime]

@ininahazwe

your code fails because of what @herecydev said and probably a direct import of the firebase package somewhere in your React code is responsible for the statement that fails. I also had big trouble getting Firebase to work with Gatsby the first time and found that circumventing such issues with dynamic imports works best. I just provided an answer in another discussion that shows how to do that.