Question

我正在从头开始构建我自己的第一个 React-App，而不使用 create-react-app。

虽然到目前为止我编写的组件似乎可以工作，但 DevTools 显示以下错误：

react-dom.development.js:24151 Uncaught TypeError: Cannot read property 'forEach' of undefined
at startWorkOnPendingInteractions (react-dom.development.js:24151)
at renderRootSync (react-dom.development.js:22658)
at performSyncWorkOnRoot (react-dom.development.js:22288)
at eval (react-dom.development.js:11327)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at scheduleUpdateOnFiber (react-dom.development.js:21888)
at updateContainer (react-dom.development.js:25477)

我尝试为 Chrome 安装 React Developer Tools Extension，但没有任何改变。

此外，页面未指向所选路径。假设我从导航栏中选择“登录”并且 URL 更改为“http://localhost:3000/Login”但页面没有自动呈现新路径，我必须按 F5。

这里是 webpack.config.js：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebpackPlugin({
    template: "./src/index.html",
})

module.exports = {
    entry: ["./src/index.js"],
    output: {
        path: path.resolve(__dirname, "./static/frontend"),
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
        ],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    
    devServer: {
        port: 3000,
        historyApiFallback: true,
      },

    plugins: [htmlPlugin]
};

和 package.json：

{
  "name": "StockApp.Frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "redux": "^4.1.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>React App</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="static/frontend/main.js"></script>
    </body>
</html>

和文件夹结构：

编辑：

我能够通过将“contentBase”添加到 webpack.config.js 中的 devServer 对象来解决我的问题

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebpackPlugin({
    template: "./src/index.html",
    filename: "index.html"
})

module.exports = {
    entry: ["./src/index.js"],
    output: {
        path: path.resolve(__dirname, "./static/frontend"),
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
        ],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    
    devServer: {
        port: 3000,
        historyApiFallback: true,
        contentBase: path.resolve(__dirname,'./static/frontend')
      },

    plugins: [htmlPlugin]
};

页面呈现正确，所有反应组件似乎都可以工作。但是，现在出现以下错误消息：

GET http://localhost:3000/static/frontend/main.js net::ERR_ABORTED 404 (Not Found)

如果我在 index.html 中将路径更改为 '/main.js' 反应完美呈现并且没有错误消息，但 html 似乎不起作用，因为 onChange 或 onSubmit 函数没有被触发

return (
        <div className='container'>
            <label htmlFor='email'><b>Email</b></label>
            <input type='text' placeholder='Enter Email' name='email' onChange={e => console.log(e.target.value)} />
            <label htmlFor='password'><b>Password</b></label>
            <input type='password' placeholder='Enter Password' name='password' required />
            <button type='submit'>Login</button>
        </div>
);

react-dom-development：未捕获的类型错误：无法读取未定义的属性“forEach”

0 个答案: