webpack 老项目升级，报错排查？

Question

报错信息：

ERROR in ./node_modules/react-dnd/dist/core/DndProvider.js 28:0-48
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'C:\Users\xiaochong\Desktop\test1\cosmohceplatform\node_modules\rea
ct-dnd\dist\core'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' fi
le where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/react-dnd/dist/core/index.js 2:0-33 2:0-33
 @ ./node_modules/react-dnd/dist/index.js 1:0-32 1:0-32
 @ ./src/js/containers/QualityHonorAwardMaintenance/index.js 47:0-69 768:23-38
 @ ./src/js/routes.js 377:0-85 1555:17-45
 @ ./src/js/containers/Root.js 24:0-31 82:18-24 112:12-18
 @ ./src/js/index.js 42:0-37 75:41-85:3 127:32-36 75:2-85:4 78:18-57

webpack 全文：

const path = require('path');
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

export default {
  devtool: 'eval-source-map',
  devServer: {
    quiet:false,
    noInfo: false,
  },
  entry: {
    main: [
      './src/webpack-public-path',
      'react-hot-loader/patch',
      'webpack-hot-middleware/client?reload=true',
      path.resolve(__dirname, 'src/js/index.js')
    ]
  },
  target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
  output: {
    path: `${__dirname}/dist`,
    publicPath: '/',
    filename: '[name]-[id].bundle.js',
    chunkFilename: '[name]-[id].chunk.js',
    library: `hce-[name]`,
    libraryTarget: 'umd',
    globalObject: 'window'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'common',
      minSize: 20000, // 20KB
      maxSize: 70000, // 70KB
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10, // 优先级，数字越小优先级越高
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      chunks: "",
      title: 'MOM-开发模式',
      favicon: './src/favicon.ico',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      hash:true,
     inject: 'body'
    }),
    new MiniCssExtractPlugin({
      chunkFilename: '[name].css', // 非入口(non-entry) chunk 文件的名称
    }),
  ],
  resolve: {
    modules: ['node_modules', path.join(__dirname, '../node_modules')],
    extensions: ['.mjs','.web.js','.js', '.json', '.jsx'], // 确保.mjs在前面
    fallback:{
      "path": false,
      "crypto": false
    },
    // 路径别名, 懒癌福音
    alias:{
      '@':path.resolve(__dirname,'src'),
      app:path.resolve(__dirname,'src/js'),
      style:path.resolve(__dirname,'src/styles')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'src'), // 包括 src/js 和 src/styles 文件夹
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              // 使用默认的 PostCSS 配置
              postcssOptions: {
                plugins: [
                  require('autoprefixer'), // 添加 autoprefixer 插件
                ]
              }
            }
          },
          'sass-loader' // 使用 sass-loader 来处理 SCSS 语法
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          {
            loader: 'less-loader',
            options: {
              sourceMap: true,
              lessOptions: {
                modifyVars: {
                  "@icon-url": "'/fonts/iconfont'"
                },
                javascriptEnabled: true
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'node_modules'),
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('precss'),
                  require('autoprefixer'),
                  require('rucksack-css')
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
        use: 'url-loader?limit=10000'
      },
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于这个大小的文件会被转为DataUrl
              name: 'images/[name].[hash].[ext]', // 输出文件的命名规则
            },
          },
        ],
      },
    ]
  },
};

package.json 全文如下：

{
  "name": "hce",
  "version": "1.0.0",
  "description": "react-base",
  "main": "index.js",
  "theme": {
    "@icon-url": "'/fonts/iconfont'"
  },
  "scripts": {
    "start": "npm-run-all --parallel open:src",
    "open:src": "babel-node server.js",
    "clean": "rimraf dist",
    "build:webpack": "node --max-old-space-size=102400 ./node_modules/webpack/bin/webpack.js --config webpack-pro-config.js --progress --colors",
    "build": "npm-run-all clean build:webpack"
  },
  "keywords": [
    "react",
    "es6",
    "webpack"
  ],
  "author": "minooo",
  "license": "MIT",
  "dependencies": {
    "@antv/g2": "^3.5.3",
    "antd": "^4.24.16",
    "axios": "^0.19.2",
    "babel-runtime": "^6.20.0",
    "copy-to-clipboard": "^3.1.0",
    "echarts": "^4.9.0",
    "echarts-for-react": "^3.0.2",
    "echarts-gl": "^1.1.2",
    "echarts-wordcloud": "^1.1.3",
    "ezuikit-js": "^0.7.0",
    "fixed-data-table-2": "^0.8.13",
    "handsontable": "^7.0.2",
    "history": "^3.0.0",
    "html2canvas": "^1.4.1",
    "jquery": "^3.4.0",
    "jspdf": "^1.5.3",
    "moment": "^2.24.0",
    "qrcodejs2": "0.0.2",
    "react": "^17.0.2",
    "react-cookie": "^1.0.4",
    "react-dimensions": "^1.3.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^17.0.2",
    "react-dragula": "^1.1.17",
    "react-free-scrollbar": "^0.3.4",
    "react-handsontable": "^0.3.2",
    "react-image-process": "^0.1.6",
    "react-modal": "^3.3.2",
    "react-piwik": "^1.6.0",
    "react-router": "^3.0.0",
    "react-slick": "^0.29.0",
    "react-to-print": "^2.14.1",
    "react-viewer": "^2.11.1",
    "reflux": "^6.4.1",
    "reqwest": "^2.0.5",
    "slick-carousel": "^1.8.1",
    "swiper": "^6.8.1",
    "wangeditor": "^3.1.1",
    "ztree": "^3.5.24"
  },
  "devDependencies": {
    "@babel/core": "^7.25.7",
    "@babel/node": "^7.25.7",
    "@babel/plugin-transform-react-jsx": "^7.25.7",
    "@babel/plugin-transform-runtime": "^7.25.7",
    "@babel/preset-env": "^7.25.7",
    "@babel/preset-react": "^7.25.7",
    "@babel/preset-stage-0": "^7.8.3",
    "autoprefixer": "^6.4.0",
    "babel-loader": "^9.2.1",
    "babel-plugin-import": "^1.1.1",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "browser-sync": "^2.14.0",
    "chokidar": "^1.6.1",
    "classnames": "^2.2.5",
    "connect-history-api-fallback": "^1.3.0",
    "cross-env": "^2.0.0",
    "css-loader": "^0.23.1",
    "express": "^4.14.0",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^5.6.0",
    "http-proxy-middleware": "^0.17.4",
    "json-loader": "^0.5.4",
    "less": "^4.2.0",
    "less-loader": "^10.2.0",
    "mini-css-extract-plugin": "^2.9.1",
    "npm-run-all": "^2.3.0",
    "postcss": "^8.4.47",
    "postcss-loader": "^4.3.0",
    "postcss-scss": "^4.0.9",
    "precss": "^1.4.0",
    "react-addons-css-transition-group": "^15.3.0",
    "react-addons-perf": "^15.4.2",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-router-dom": "^5.3.0",
    "redbox-react": "^1.6.0",
    "rimraf": "^2.5.3",
    "rucksack-css": "^0.8.6",
    "sass": "^1.79.4",
    "sass-loader": "^16.0.2",
    "style-loader": "^0.13.2",
    "url-loader": "^3.0.0",
    "webpack": "^5.95.0",
    "webpack-dev-middleware": "^5.3.4",
    "webpack-hot-middleware": "^2.26.1"
  }
}

且已经删除依赖包，清除缓存重新安装过了，
.babelrc 配置如下：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    ["import", { "libraryName": "antd", "style": true }],
    ["@babel/plugin-transform-runtime", {
      "helpers": false,
      "regenerator": true
    }],
    ["@babel/plugin-transform-react-jsx", { "runtime": "automatic" }]
  ]
}

根据 文心一言，chatGPT，通义千问 来回改的就是这三个文件，但这个错误始终存在。。。。。请教大佬，到底是哪里的问题？

Answer 1

https://github.com/react-dnd/react-dnd/issues/3470