為什么我得到 Uncaught ReferenceError: React is not defined？

Question

我正在設置 webpack 並在 SpringMVC webapp 中做出反應，在點擊我的 /index 頁面時出現此錯誤。

相關的controller方法在這里

@RequestMapping("/index")
public ModelAndView index(final HttpServletRequest request) {
    return new ModelAndView("index");
}

src/main/resource/templates/index.html 中的模板如下所示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Webpack App</title>
    </head>
    <body>
    <span>React Content Below:</span>
        <div id="content"/>
    </body>
    <script type="text/javascript" src="http://localhost:3000/dist/app.js">
    </script>
</html>

現在到肉上。 我的 webpack.config.js 看起來像這樣

// Generated using webpack-cli http://github.com/webpack-cli
const path = require('path');
const webpack = require("webpack");

module.exports = {
    mode: 'development',
    entry: './src-js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js',
    },
    devServer: {
        open: true,
        host: 'localhost',
        port:3000
    },
    externals: {
        'react': 'React'
    },
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env',
                        '@babel/preset-react',
                    ]
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader','css-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
                type: 'asset',
            },

            // Add your rules for custom modules here
            // Learn more about loaders from https://webpack.js.org/loaders/
        ],
    },
};

我的./src-js/app.js 看起來像這樣。

import * as ReactDOM from "react-dom";

ReactDOM.render(<h1>Hello, world</h1>, document.getElementById('content'));

我后來修改 app.js 看起來像這樣

import * as React from 'react';
import * as ReactDOM from 'react-dom'

class Component extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return <h1>Hello, world</h1>
    }
}

ReactDOM.render(<Component/>, document.getElementById('content'));

這目前有效，但從長遠來看，我寧願不需要從這個文件中導入 React 並將所有內容包裝在一個組件中。

將import React from 'react'添加到 app.js 的頂部沒有效果， var React = require('react')也沒有效果。 我假設我只是在我的 webpack 配置中丟失了一些東西，但我似乎找不到什么，有人知道為什么會這樣嗎？

Answer 1

在 webpack 文檔（ https://webpack.js.org/configuration/externals/ ）中，冒號前似乎沒有引號：

externals: {
    react: 'React'
},

下面幾行（ https://webpack.js.org/configuration/externals/#object ）你可以找到小寫的反應：

externals: {
    react: 'react'
},

為什么我得到 Uncaught ReferenceError: React is not defined？

問題描述

1 個解決方案

解決方案1
0 2021-04-03 10:47:56

為什么我得到 Uncaught ReferenceError: React is not defined？

問題描述

1 個解決方案

解決方案1 0 2021-04-03 10:47:56

解決方案1
0 2021-04-03 10:47:56