2017-10-25 10 views
2

gatsbyjs를 사용하여 정적 HTML 페이지에 반응 애플리케이션을 빌드하려고합니다. 내가 NPM 5.5.1을 사용하고GatsbyJS 및 Superagent : WebpackError : require가 함수가 아닙니다.

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 파일에 슈퍼 에이전트을 주석 처리하고, 빌드가 잘 통해 간다. 그러나, 나는이 문제가 발생해야하는 이유를 이해하지 않습니다

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

답변

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 오류를 해결했다.