reactjs - 未捕获的引用错误 React 未定义

问题描述

我收到以下错误

external_"react":1 Uncaught ReferenceError: react is not defined
at eval (external_"react":1)
at Object.react (bundle.js:120)
at __webpack_require__ (bundle.js:20)
at eval (client.js:2)
at Module../src/client.js (bundle.js:97)
at __webpack_require__ (bundle.js:20)
at bundle.js:84
at bundle.js:87
eval @ external_"react":1
react @ bundle.js:120
__webpack_require__ @ bundle.js:20
eval @ client.js:2
./src/client.js @ bundle.js:97
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:84
(anonymous) @ bundle.js:87

我在这里阅读了很多关于如何解决的文章，但没有任何效果。

我的 webpack.config.js 如下：

const isDevelopment = process.env.NODE_ENV === 'development';
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const  HtmlWebpackPlugin = require('html-webpack-plugin');

const isomorphicRules = [
  {
    test: /\.(js?|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          '@babel/preset-env',
          '@babel/preset-react'
        ]
      }
    }
  },
  {
    test: /\.s[ac]ss$/i,
    use: [
      {
        loader: 'style-loader'
      },
      {
        loader: 'css-loader',
        options: {
          modules: true
        }
      },
      {
        loader: 'sass-loader',
        options: {
          // Prefer `dart-sass`
          implementation: require('sass'),
          sassOptions: {
            indentWidth: 4,
            includePaths: ['public'],
          },
        },
      }
    ]
  },
];

const client = {
  entry: './src/client.js',
  output: {
    path: path.join(__dirname, './src/public/dist/'),
    publicPath: '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: isomorphicRules,
  },
  externals: ["react", "react-dom"],
  plugins: [
    new HtmlWebpackPlugin({
      template: '!!raw-loader!' + path.join(__dirname, './src/views/clientside.ejs'),
      filename: 'clientside.ejs',
      inject: 'body'
    })
  ]
};

const server = {
  entry: './src/server.js',
  output: {
    path: path.join(__dirname, './src/public/dist/'),
    filename: 'server.js'
  },
  module: {
    rules: isomorphicRules
  },
  target: 'node',
  externals: [nodeExternals(), "react", "react-dom"],
  plugins: [
    new HtmlWebpackPlugin({
      template: '!!raw-loader!' + path.join(__dirname, './src/views/serverside.ejs'),
      filename: 'serverside.ejs'  // this line decide the extension of output file.
    })
  ]
};

module.exports = [
  client, 
  server,
];

我被难住了，因为我添加了外部反应。

为了更好的衡量，这里是我的 package.json

    {
  "name": "webtest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "abstract-syntax-tree": "^2.9.3",
    "bootstrap": "^4.5.1",
    "compression": "^1.7.4",
    "dotenv": "^8.2.0",
    "ejs": "^3.1.3",
    "express": "^4.17.1",
    "fabric": "^4.1.0",
    "form-data": "^3.0.0",
    "formidable": "^1.2.2",
    "govuk-frontend": "^3.8.1",
    "highlight.js": "^10.1.2",
    "moment": "^2.27.0",
    "node-fetch": "^2.6.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-dom": "^16.13.1",
    "react-dom-server": "0.0.5",
    "react-html-parser": "^2.0.2",
    "react-json-view": "^1.19.1",
    "react-router-dom": "^5.2.0",
    "react-script-tag": "^1.1.2",
    "react-scripts": "^3.4.3"
  },
  "scripts": {
    "webpack": "webpack --mode development --config webpack.config.js",
    "dev": "set NODE_ENV=development && webpack --mode development --config webpack.config.js && nodemon --exec babel-node src/index.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/node": "^7.10.5",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/polyfill": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "babel-plugin-css-modules-transform": "^1.6.2",
    "cross-env": "^7.0.2",
    "css-loader": "^4.2.2",
    "dart-sass": "^1.25.0",
    "ejs-webpack-loader": "^2.2.2",
    "file-loader": "^6.0.0",
    "html-loader": "^1.3.0",
    "html-webpack-plugin": "^4.4.1",
    "mini-css-extract-plugin": "^0.10.0",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.4",
    "nodemon-webpack-plugin": "^4.3.2",
    "raw-loader": "^4.0.1",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.1",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-node-externals": "^1.7.2"
  }
}

我正在使用 npm start dev 脚本启动。

呈现的html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JSON Forms Demo</title>
</head>
<body>
<div id="root">
</div>
<script src="/dist/bundle.js"></script></body>
</html>

所以我很清楚问题是反应没有定义。我的问题是为什么不呢？

我的 client.js 看起来像

import React from 'react';
import ReactDOM from 'react-dom';
import ClientApp from './clientApp';

ReactDOM.render(<ClientApp />, document.getElementById('root'));

clientApp 如下：

import React, { Component } from 'react';

class ClientApp extends Component {
  render() {
  return ( 
    <div>
        <h1>Hello World from Client Side App</h1>
    </div>
    );
  }
}

export default ClientApp;

我的 .babelrc 文件也看起来像

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

所以我觉得我已经用我在这里和 webpack 网站上阅读的内容涵盖了所有基础，但我显然错过了一些东西，如果专家组可以看一下，我将不胜感激。

标签： reactjswebpack

reactjs - 未捕获的引用错误 React 未定义

问题描述

解决方案

推荐阅读