GatsbyJS＆Superagent：WebpackError：requireは関数ではありません

Question

私はgatsbyjsを使用して静的なhtmlページに私の反応アプリを構築しようとしています。私はNPM 5.5.1を使用しています

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 

：その後、私が得る、私はちょうど「ギャツビービルド」を試みたが、それは静的なページを作成しようとするまで、それが正常にすべてのものを通過します。

編集：

だから私はちょうど私のcontact.jsファイルでたSuperAgentをコメントアウトし、ビルドが罰金を通過します。これは、任意の問題を引き起こすべき理由しかし、私は理解していない：

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>); 
} 
} 

Answer 1

を私は（私の場合はAuth0から来る）この同じエラーに遭遇しました。 webpackの設定を変更して解決できました。 gatsby-node.jsで

：

exports.modifyWebpackConfig = ({ config, stage }) => { 
    config.plugin("webpack-define", webpack.DefinePlugin, [{ "global.GENTLY": false }]) 

    return config; 
}; 

auth0ロックは、サーバー側のレンダリングをサポートしていないので、私は他の問題に実行することになったが、これはrequire is not a functionエラーを解決しました。