反應 - 未捕獲ReferenceError：要求沒有定義

我正在做一個簡單的燒瓶應用程序，使用反應前端的東西。現在我正在嘗試從其他文件導入React組件，但沒有成功。這是我得到的錯誤：反應 - 未捕獲ReferenceError：要求沒有定義

Uncaught ReferenceError: require is not defined

這是我的html文件：

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Index page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css"> 
    <link rel="stylesheet" type="text/css" href="/static/css/style.css"> 
</head> 
<body> 
    <div class="columns"> 
     <div class="column"> 
      some stuff 
     </div> 
     <div class="column"> 
      <div id="index"></div> 
     </div> 
    </div> 
    <script type="text/babel" src="static/js/index.js"></script> 
</body> 
</html>

和我index.js：

import FormComponent from './FormComponent.js'; 

var MainClass = React.createClass({ 
    render:function(){ 
    return (
     <div> 
     <div>this is the main component</div> 
     <div><FormComponent /></div> 
     </div> 
    ); 
    } 
}); 


ReactDOM.render(<MainClass />, document.getElementById('index'));

終於FormCommponent.js，它位於同一個文件夾中：

var FormComponent = React.createClass({ 

    render: function() { 
    return (
     <div>this is an imported component</div> 
    ); 
    } 

}); 

module.exports = FormComponent;

有誰知道我做錯了什麼？

我沒有使用任何軟件包管理器。

編輯
通過使用browserify解決了問題，如下所述。感謝您的幫助

來源

2016-03-28 André Macedo

'require' * only *適用於前端客戶端代碼，如果您使用的是Browserify或其他解決方案。瀏覽器沒有本地的「require」定義。 –

您需要使用像Rollup，Webpack或Browserify之類的東西。此聲明import FormComponent from './FormComponent.js';並不意味着客戶端上的任何內容。沒有瀏覽器本身支持它，所以你需要類似上面提到的工具來將它變成瀏覽器實際可以使用的東西。

沒有它們，你只需要加載你的index.html文件。

來源

2016-03-28 04:09:18 ThrowsException

[browerify手冊]（https://github.com/browserify/browserify-handbook）首先解釋爲什麼這對於那些不明白這是什麼的人來說是必要的。 –

反應 - 未捕獲ReferenceError：要求沒有定義

回答

相關問題