web-dev-qa-db-ja.com

キャッチされないReferenceError：Reactは定義されていません

こんにちは、私はこのタイプの質問がかなり頻繁に尋ねられたことを知っていますが、答えを得ることができませんでした。

React hello worldの例。app.jsxとhomepage.jsxの2つのファイルしかありません。webpackを使用してファイルをバンドルしています。

しかし、コードを実行すると、Uncaught ReferenceError: React is not defined

私のhomepage.jsxは次のようになります

"use strict";

var React = require('react');

var Home = React.createClass({
    render : function() {
        return (
            <div className="jumbotron">                
                <h1> Hello World</h1> 
            </div>
        );
    }
});

module.exports = Home;

私のapp.jsはこのように見えます

var ReactDOM = require('react-dom');

var Home = require('./components/homePage');

ReactDOM.render(
  <Home/>,
  document.getElementById('app')
);

ブラウザでは、Uncaught ReferenceError: React is not defined 7行目、つまりホームページが必要な場所。

しかし、app.jsxにvar React = require（ 'react'）を追加すると正常に動作します。

これはわかりません。私はそれを利用しているhomepage.jsxにreactを含めました。 app.jsxでは、Reactを使用しないため、react-domのみが必要です。次に、app.jsxでエラーが発生する理由。

助けて!!

reactjswebpackreact-dom
16
Aniket

app.jsをこれに変更します

var React = require('react');
var ReactDOM = require('react-dom');

var Home = require('./components/homePage');

ReactDOM.render(
    <Home/>,
    document.getElementById('app')
);

JSXはReact.createElement()呼び出しに変換されるため、React=がスコープ内で必要です。はい、app.jsでReactを使用しています。 JSXまたは直接のReact.*呼び出しを使用します。

40
Andreyco

コードで必要なく使用できます。

webpack.config.jsに追加します：

plugins: [
  new webpack.ProvidePlugin({
    "React": "react",
  }),
],

http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin を参照してください

9
MiF