[解決済み] エラーです。Uncaught ReferenceError: Reactは定義されていません。

2022-02-18 19:55:04

質問

概要

BabelとWebpackを使って、Reactアプリを作ろうとしています。この場合 create-react-app が、これらの技術がどのように連携できるのか、自分で勉強してみたいです。

を実行すると yarn run start または yarn run build (参照 パッケージ.json Webpack はバンドルが正常にビルドされたことを報告します。ブラウザでアプリケーションを実行すると Uncaught ReferenceError: React is not defined というエラーが発生します。

この同じエラーに関する質問がSOにいくつもありますが、どの解決策もまだ私の問題を解決していません。

質問内容

React、Babel、Webpackをうまく連携させるために足りないものは何ですか？

コード

パッケージ.json

{
  "private": true,
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-redux": "^5.0.1",
    "redux": "^3.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "redux-devtools": "^3.3.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

.babelrc

{
  "presets": ["react", "es2015"]
}

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist'
  },
  devtool: 'source-map',
  debug: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

src/index.js

import ReactDom from 'react-dom';
import React from 'react';
import App from './App';

ReactDom.render(
  <App />,
  document.getElementById('root'),
);

src/App.js

import React from 'react';
import { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>hello</h1>
    );
  }
}

観察記録

どうやらWebpack/Babelが期待しているのは React がグローバルスコープで使用可能であるか、あるいは私の import React from 'react'; ステートメントを使用します。
また、まだ適切な呪文である devtools と debug プロパティをWebpackの設定に追加して、実際にソースマップを動作させることができました。コンパイルされた出力にはまだ表示されていません。

EDIT

壊れた bundle.js はSOでは大きすぎる（21,000行以上）ので、ここにリンクを貼っておきます。 http://chopapp.com/#1a8udqpj - は、読み込みと表示に数秒かかります。

解決するには？

次のような意見を述べたいと思います。まず、devToolsとdebugに関するあなたの質問について。webpack の debug フラグ (彼らの公式ドキュメント ) ローダーをデバッグモードに切り替えます。それから、私が理解したところでは、webpackは、開発環境で実行されている場合、実際にはコードをハードファイルにコンパイルせず、メモリに保持します。したがって、ソースマップもメモリ上に保持され、ブラウザにリンクされます。ブラウザの開発ツールを開いてソースを表示すると、その効果を確認することができます。

さて、開発サーバーが正しく設定されていると仮定すると、index.htmlはソースディレクトリに置かれているものとします。もしそうなら、スクリプトの参照先は 'dist/bundle.js' ではなく '/bundle.js' であるべきで、物理的な "dist" フォルダが存在しないかもしれないからです。

また、webpack.config.js のエントリポイントから ".js" を削除することをお勧めします。

[解決済み] エラーです。Uncaught ReferenceError: Reactは定義されていません。

質問

概要

質問内容

コード

観察記録

EDIT

解決するには？

関連

最新

おすすめ