Reactjs 如何使用Webpack将React组件构建为依赖项库？

我创建了一个小的概念验证组件，并将其推到这里->

我希望能够通过执行以下操作在不同的React项目中导入此组件：

npm install git+https://github.com/lropero/poc.git

，然后从“Poc”导入Poc，并能够呈现组件（即

）。问题是，我得到的是React的不变冲突错误#321，因为我使用了hook（在本例中是useffect）。我试着注释这个钩子，我能够看到

测试

元素呈现良好。我猜这是一个网页包的问题时，建设Poc的捆绑

如下所示的相关文件（所有内容）：

/src/index.jsx

：

import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  useEffect(() => {
    console.log('SUCCESS')
  }, [])
  return <p>TEST</p>
}

if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
  ReactDOM.render(<App />, document.getElementById('app'))
}

export default App

/webpack.config.js

（

webpack.common.js

和

webpack.prod.js

合并在一起）：

---

在使用生产模式构建时，您似乎忘记了将

React

+

ReactDOM

排除在捆绑包文件之外

当您将代码发布为React组件时，除了将

React

设置为对等依赖项外，还必须将

React

设置为外部，以便在使用者库中使用React

在

webpack.prod.js

中添加更多外部属性：

externals: {
  'react': {
    commonjs: 'react',
    commonjs2: 'react',
    amd: 'React',
    root: 'React'
  },
  'react-dom': {
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'ReactDOM',
    root: 'ReactDOM'
  }    
},

{
  entry: './src/index.jsx',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        ]
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    library: 'Poc',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      [name]: path.resolve(__dirname, 'src')
    },
    extensions: ['.js', '.jsx']
  }
}

externals: {
  'react': {
    commonjs: 'react',
    commonjs2: 'react',
    amd: 'React',
    root: 'React'
  },
  'react-dom': {
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'ReactDOM',
    root: 'ReactDOM'
  }    
},