menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
Team

ReferenceError: XMLHttpRequest is not defined - on production build

January 16, 2019 at 4:16pm

ReferenceError: XMLHttpRequest is not defined - on production build

January 16, 2019 at 4:16pm
Hello,
What is the way to fix a 'ReferenceError: XMLHttpRequest is not defined' error? The error occurs every time when I am building the production build. I am trying to build a Gatsby v2 environnement with i18next for my translations.
When I start the development envoironnement, everything works just fine, the translations are rendered. Somehow I can't figure out how to fix it for the production build.
gatsby-ssr.js
i18n.js
gatsby-node.js

January 17, 2019 at 2:20am
Sounds like XMLHttpRequest is not properly installed in production's node_modules. Have you checked it?
  • reply
  • like

January 17, 2019 at 8:27am
Sounds like XMLHttpRequest is not properly installed in production's node_modules. Have you checked it?
Yes it's installed in the node_modules, and I can console log the XMLHttpRequest function. I think when I build, ssr can't find it, I see this error for example;
  • reply
  • like

April 23, 2019 at 4:09pm
Hey! I'm getting the same problem, were you able to figure it out?
  • reply
  • like

August 30, 2019 at 2:23am

August 30, 2019 at 9:21am
If it's console-logging fine when loaded in the browser, that doesn't prove that it will work for SSR. XHR is available in the browser by default, but you'll need to polyfill it in Node. If you have the xhr2 node module installed, you could do something like this in your gatsby-ssr.js:
if (!("XMLHttpRequest" in global)) {
global.XMLHttpRequest = require('xhr2');
}
  • reply
  • like
I already do it in gatsby-node.js
  • reply
  • like
you mean need gatsby-ssr.js to set global XMLHttpRequest?
  • reply
  • like
Thinking about it a bit, I reckon the right place to polyfill it would be in index.js or App.js. Wherever you're calling i18next.init() would be a good choice
  • reply
  • like

December 19, 2019 at 7:57am
Hi Guys I'm also facing exactly same error ReferenceError: XMLHttpRequest is not defined - on production build Yes sounds like XMLHttpRequest is not global in Gatsby. Any idea how to over come this error ?
  • reply
  • like

September 16, 2020 at 6:40am
Hi Guys, Any follow up on this, I have been doing same thing but we hit same error even with polyfill.
  • reply
  • like