エラー：キャッチされていないReferenceエラー：Reactが定義されていません

debugcn 投稿 Dev

私の願い

概要概要

BabelとWebpackを使用してReactアプリを構築しようとしています。使用できることはわかっていますcreate-react-appが、これらのテクノロジーがどのように連携して機能するかを学びたいと思います。

yarn run startまたはyarn run build（以下のpackage.jsonを参照）を実行すると、Webpackはバンドルを正常にビルドしたと報告します。ブラウザでアプリケーションを実行すると、Uncaught ReferenceError: React is not definedエラーが発生します。

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

質問

React、Babel、Webpackをうまく一緒にプレイするには、どの部分が欠けていますか？

コード

package.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';発言を無視しているようです。
また、実際にソースマップを機能させるために、Webpack構成で適切な呪文devtoolsとdebugプロパティをまだ見つけていません。コンパイルされた出力にはまだ表示されていません。

編集

壊れたbundle.jsはSO（21,000行以上）には大きすぎるため、次のリンクを参照してください：http：//chopapp.com/#1a8udqpj —ロードして表示するのに数秒かかります。

ポール・ストーナー

Reactでの限られた経験から、次のことを観察したいと思います。まず、devToolsとデバッグに関する質問です。webpackのデバッグフラグ（公式ドキュメントによる）は、ローダーをデバッグモードに切り替えます。次に、私が理解していることから、webpackは、開発環境で実行されている場合、実際にはコードをハードファイルにコンパイルせず、メモリに保持します。したがって、ソースマップもメモリに保持され、ブラウザにリンクされます。ブラウザの開発ツールを開いてソースを表示すると、その効果がわかります。

ここで、開発サーバーが正しく構成されていると仮定すると、index.htmlもソースディレクトリにあると仮定します。この場合、物理的な「dist」フォルダがない可能性があるため、スクリプト参照は「dist /bundle.js」ではなく「/bundle.js」を指す必要があります。

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

いくつかの観察。お役に立てば幸いです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-05-29

コメントを追加

サインイン

分類Dev

Related 関連記事

記事