一个项目中有 2 个 React答案

【问题标题】：There are 2 Reacts in one project一个项目中有 2 个 React
【发布时间】：2020-12-31 08:51:17
【问题描述】：

我目前正在开发一个 React Web 应用程序，我突然开始收到invalid hook call 错误。经过一番研究，我发现我有两份React。甚至每个 css 文件都有一个以上相同的

但是，在我尝试了几乎所有方法之后，还有一个关于它的 github 问题github issue，它也没有帮助我。请帮帮我，我真的开始用完了解决方案

我的 webpack.config.js（如果需要）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const port = 8080
const host = "127.0.0.1"

module.exports = {
  entry: [
    "webpack-dev-server/client?http://127.0.0.1:8080/",
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/',
/*     libraryTarget: 'commonjs' */
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            /* name: "public/images/[name].[ext]" */ //Gives Error??
          }
        ]
      }
    ]
  },
  resolve : { extensions: [".js", ".jsx"], /* alias:{react: path.resolve('./node_modules/react'), 'react-dom':path.resolve('./node_modules/react-dom')} */},
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: port,
    host: host,
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './public/index.html',
        filename: 'index.html',
        favicon: './public/favicon.ico'
    })
  ],
  /* externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  } */
};

【问题讨论】：

尝试清除浏览器中的数据并再次尝试重建。

标签： javascript html reactjs webpack redux

【解决方案1】：

这些是您可以尝试的几件事。我们也遇到过类似的问题。

确保您的 react 和 react-dom 版本相同
如果没有，请使用相同的版本
否则，在您的 webpack 中添加一个别名（您已经完成但已注释的方式），添加它仅用于反应。

{
    resolve: {
        alias: {
            react: path.resolve(__dirname, "./node_modules/react")
        }
    }
}

注意：如果您的 webpack 配置与您的 node_modules 处于同一级别，则上述内容将起作用。否则相应地更新反应路径。

【讨论】：

【解决方案2】：

所以问题是HtmlWebpackPlugin 扩展，不知何故它创建了一个子应用程序组件并再次呈现相同的东西。我真的不知道这是怎么回事，但是删除这个扩展后一切都恢复正常了。

【讨论】：