GatsbyJS & Superagent: WebpackError: require is not a function

[georgewelder]

I'm trying to build my react app into static html pages with gatsbyjs. I just tried 'gatsby build', and it goes through everything fine until it wants to create the static pages, then I get:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help


  1 | if (global.GENTLY) require = GENTLY.hijack(require);   2 |
> 3 | var crypto = require('crypto');
    | ^   4 | var fs = require('fs');   5 | var util = require('util'),   6 |     path = require('path'),


  WebpackError: require is not a function

  - incoming_form.js:3 Object.map../file
    ~/formidable/lib/incoming_form.js:3:1

  - index.js:1 Object.<anonymous>
    ~/formidable/lib/index.js:1:1

  - index.js:8 Object.<anonymous>
    ~/superagent/lib/node/index.js:8:1

  - contact.js:3 Object.<anonymous>
    src/pages/contact.js:3:1

  - sync-requires.js:8 Object.exports.__esModule
    .cache/sync-requires.js:8:53

I am using npm 5.5.1.

I just commented out superagent in my contact.js file, and the build goes through fine. However, I don't understand why this should cause any problems:

contact.js:

import request from 'superagent'

export default class Contact extends React.Component {

  constructor(props) {
    super(props);
    this.state = { showThankYou: false};

    this.handleSubmit = this.handleSubmit.bind(this);
  }

handleSubmit(e) {
    e.preventDefault();
  
    request.post('http://www.mywebsite.com/email.php') 
    .send(new FormData(document.getElementById('myForm')))
    .end(function(err, res){
      if (err || !res.ok) {
        console.log('Oh no! error' + err);
      } else {
        console.log('yay got it');
      }
    });

    document.getElementById("myForm").reset();
    this.setState({showThankYou: true});
  }
  

render() {  
    return (
    <div className="row">

        <div className="form_wrapper">
          <div>
            <form id="myForm" onSubmit={this.handleSubmit}> 

              <label htmlFor="fname">First Name</label>
              <input type="text" id="fname" name="fname" />

              <label htmlFor="lname">Last Name</label>
              <input type="text" id="lname" name="lname" />

              <label htmlFor="email">E-mail Address</label>
              <input type="text" id="email" name="email" />

              <label htmlFor="message">Message</label>
              <textarea id="message" name="message" style={{height: "100px"}}></textarea>

              <input type="submit" value="Submit" />

            </form>
          </div>
        </div>    
    </div>);
}
}

[KyleAMathews]

Better to use a library designed for the browser like axios. It looks like webpack is complaining when superagent tries to require node code.

[ethanlee16]

@KyleAMathews - I agree, but Superagent does have a browser target. However, it relies on the Webpack target value being web instead of node, which Gatsby changes here for the gatsby build command. There is a comment about using the browser field in package.json, but I don't see that taking effect in Gatsby's Webpack config? How else can we workaround this?

[ethanlee16]

Is there a particular reason node would be chosen as the target over web for the build command? According to Webpack docs, this value would only ignore the browser field, which seems like something we wouldn't want to do from what the comment mentions.

[s-kennedy]

I've just come across this issue as well. I'm using Auth0 for authentication and this is what I'm getting:

  1 | if (global.GENTLY) require = GENTLY.hijack(require);
  2 |
> 3 | var crypto = require('crypto');
    | ^
  4 | var fs = require('fs');
  5 | var util = require('util'),
  6 |     path = require('path'),


  WebpackError: require is not a function

  - incoming_form.js:3 Object.map../file
    ~/formidable/lib/incoming_form.js:3:1

  - index.js:1 Object.<anonymous>
    ~/formidable/lib/index.js:1:1

  - index.js:8 Object.<anonymous>
    ~/superagent/lib/node/index.js:8:1

  - request-builder.js:2 Object.<anonymous>
    ~/auth0-js/src/helper/request-builder.js:2:1

  - index.js:3 Object.<anonymous>
    ~/auth0-js/src/authentication/index.js:3:1

[KyleAMathews]

Hmmm not sure now actually why that isn't always web... could you test changing it locally and see if solves your problem?

[s-kennedy]

Turns out it was an issue in a dependency of superagent as documented here: node-formidable/formidable#337

[ethanlee16]

@KyleAMathews Just tested it, setting to web does resolve this issue. The package imports correctly as superagent warns about being in a non-browser environment (it's checking for the existence of the Window global, so it's a bit misleading).

Let me know if you want me to send in a PR to change this!

[quantizor]

@ethanlee16 Still seeing this years later... would love to get it fixed in the platform

[sejori]

Still seeing this issue as well. Tried editing gatsby webpack config locally, no luck. Also tried adjusting gatsby-node.js to set GENTLY to false as that fix has been mentioned elsewhere, still no luck.

Annoyingly can't easily switch package as the API we're using needs some of superagents functionality. @probablyup, I don't suppose you found anything?

[quantizor]

I ended up switching to a different package

[daniellangnet]

Anyone looking for a solution, this fixed it for me: https://stackoverflow.com/a/47949253/222479
In my case it was Pubnub and Pubnub-React that didn't work without this.