我的 React 18 的 Webpack 配置顯示 Uncaught TypeError: Failed to resolve module specifier "react-dom/client"

Question

我正在學習 webpack 以在沒有 create-react-app 的情況下開始我的 react 項目。 一切似乎都正常，但是當我在npm run dev之后打開控制台時，我看到了錯誤消息： Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../". Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".

以下是我的項目文件。

webpack-react
├── dist
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   ├── App.js
│   └── index.js
├── webpack.config.js
└── .babelrc

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="../src/index.js"></script>
  </body>
</html>

應用程序.js

function App() {
  return (
    <div>
      <h1>Welcome to webpack</h1>
    </div>
  );
}

export default App;

index.js

import ReactDOM from "react-dom/client";
import App from "./App";

const root = document.querySelector("#root");

ReactDOM.createRoot(root).render(<App />);

.babelrc

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

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  resolve: {
    extensions: [".js", "jsx", ".css"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.html$/,
        use: {
          loader: "html-loader",
          options: {
            minimize: true,
          },
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ template: "./public/index.html" }),
  ],
  devServer: {
    host: "localhost",
    port: process.env.PORT || 3000,
    open: true,
  },
};

包.json

{
  "name": "webpack-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --mode production --progress"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  }
}

我發現盡管有消息，但仍呈現反應文件很奇怪..

Answer 1

我相信錯誤來自這條線

<script type="module" src="../src/index.js"></script>

由於您使用 Webpack 進行捆綁，因此注入由 Webpack 處理。 刪除該行，應用程序應該仍然可以工作並且錯誤應該消失。

我的 React 18 的 Webpack 配置顯示 Uncaught TypeError: Failed to resolve module specifier "react-dom/client"

問題描述

1 個解決方案

解決方案1
2 已采納 2022-05-28 07:23:08

我的 React 18 的 Webpack 配置顯示 Uncaught TypeError: Failed to resolve module specifier &quot;react-dom/client&quot;

問題描述

1 個解決方案

解決方案1 2 已采納 2022-05-28 07:23:08

我的 React 18 的 Webpack 配置顯示 Uncaught TypeError: Failed to resolve module specifier "react-dom/client"

解決方案1
2 已采納 2022-05-28 07:23:08