Question

我正在构建一个可重用的反应库，该库使用其他反应库作为依赖项。我正在使用webpack作为构建工具。

我遇到的挑战是当我将我的库导入我的应用程序时，我使用create-react-app构建，我收到以下错误：

addComponentAsRefTo(...): Only a ReactOwner can have refs. 
You might be adding a ref to a component that was not created inside a component's `render` method, 
or you have multiple copies of React loaded (details: https://facebook.github.io/react/warnings/refs-must-have-owner.html).

根据我的理解，问题是webpack在我的库中以冲突的版本捆绑了一个额外的react副本。

我尝试了几条建议，但似乎都没有。我试过：

1.在我的webpack中添加react作为别名

  resolve: {
    alias: {
      'react' : path.resolve(__dirname, 'node_modules/react'),
    },
    modules: [path.join(__dirname, 'node_modules')],
    extensions: [".js", ".jsx"]
  },

2.在webpack中添加反应和反应作为外部：

  externals: {
    'ReactCSSTransitionGroup': 'react/lib/ReactCSSTransitionGroup',
    'react': {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      umd: 'react',
      root: 'React'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'react-dom',
      umd: 'react-dom',
      root: 'ReactDOM'
    }
  },

3.还尝试在package.json中添加react作为devDependency和peerDependency。

如果我在将库链接到应用程序时删除了node_modules文件夹，它将开始工作。这显然不是一个解决方案，而是更多的暗示，它正在从node_modules中提取额外的响应副本。一旦我运行npm i，问题就会恢复。

这是我的完整网络包：

const path = require('path')
const SRC_DIR = path.resolve(__dirname, 'src')
const DIST_DIR = path.resolve(__dirname, 'dist')

module.exports = {
  entry: SRC_DIR + '/index.js',
  output: {
    path: DIST_DIR,
    filename: 'index.js',
    libraryTarget: 'umd'
  },
  resolve: {
    alias: {
      'react' : path.resolve(__dirname, 'node_modules/react'),
    },
    modules: [path.join(__dirname, 'node_modules')],
    extensions: [".js", ".jsx"]
  },
  resolveLoader: {
    modules: [path.join(__dirname, 'node_modules')]
  },
  externals: {
    'ReactCSSTransitionGroup': 'react/lib/ReactCSSTransitionGroup',
    'react': {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      umd: 'react',
      root: 'React'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'react-dom',
      umd: 'react-dom',
      root: 'ReactDOM'
    }
  },
  module: {
    loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        {
          test: /\.js?/,
          include: SRC_DIR,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            presets: ['es2015', 'react', 'stage-0'],
            plugins: [
              'transform-class-properties',
              'transform-object-rest-spread'
            ]
          }
        }
    ]
  }
};

我的package.json：

{
  "name": "test-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "start": "webpack --progress --colors --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-plugin-react-css-modules": "3.2.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "react": "^15.0.0",
    "react-bootstrap-table": "4.0.2",
    "react-dom": "15.6.1"
  }
}

我还创建了两个repos来重现bug，一个是测试应用程序，一个是测试库。重现：

克隆应用和库并运行npm i： app：https://github.com/scottmcpherson/test-app 图书馆：https://github.com/scottmcpherson/git-library
cd进入库并运行npm link
进入应用并运行npm link test-library
cd回到应用程序并运行npm start
您应该会在浏览器中看到错误。如果您在编辑器中打开应用程序并查看App.js，您可以看到我在哪里导入测试库。

仅发生此错误，因为库取决于react-bootstrap-table。如果我注释掉该模块并只渲染一个普通的jsx表，那么一切都可以找到。

Answer 1

根据documentation以避免依赖重复，您可以尝试这样做：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common'
})

如何使用webpack捆绑库而不捆绑重复的反应依赖项？

1 个答案: