フロントエンドのものにreactを使用して、簡単なフラスコアプリを作成しています。現在、他のファイルからReactコンポーネントをインポートしようとしていますが、成功していません。これは私が得ているエラーです：
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を使用して問題を解決しました。助けてくれてありがとう
Rollup、Webpack、Browserifyなどを使用する必要があります。このステートメントimport FormComponent from './FormComponent.js';は、クライアントにとって何の意味もありません。ネイティブにサポートしているブラウザはないため、ブラウザが実際に使用できるものに変換するには、上記のツールのようなものが必要です。
それらがなければ、index.htmlにファイルをロードする必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加