使用Webpack实现React包

使用Webpack实现React包 - 只有ReactOwner可以有refs(React Package with Webpack - Only a ReactOwner can have refs)

我正在创建一个名为Supernova的反应包。 所以，在我使用这个包的其他项目中（使用npm链接），这个错误显示在控制台中：

只有ReactOwner可以有refs。 您可能正在向组件的render方法中未创建的组件添加ref，或者您有多个React副本已加载

这是我的Supernova webpack配置：

const webpack = require('webpack') const ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = { entry: './src/index.js', output: { library: 'Supernova', libraryTarget: 'umd', path: __dirname + '/build', filename: 'index.js', }, externals: [ { react: { root: 'React', commonjs2: 'react', commonjs: 'react', amd: 'react' } } ], module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' }, { test: /\.(scss|sass|css)$/, loader: ExtractTextPlugin.extract("style", "css!sass") }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[hash].[ext]' } ] }, resolve: { extensions: ['', '.js', '.jsx'] }, node: { Buffer: false }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new ExtractTextPlugin("[name].css"), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] }

我的组件方法渲染是：

render() { return ( <div className="sn-search-box"> {this.renderSelecteds()} <input ref="input" type="text" className="sn-search-box__input" placeholder={this.props.label} autoComplete="off" onFocus={this.handleInputFocus.bind(this)} onBlur={this.handleInputBlur.bind(this)}/> <span className="sn-search-box__input--icon"></span> {this.state.hasFocus ? this.renderResults() : null} {this.renderHelpMessage()} </div> ) }

我的超新星package.json

"peerDependencies": { "react": "^15.3.0", "react-dom": "^15.3.0" }, "dependencies": { "material-design-icons": "^2.2.3" }, "devDependencies": { "autoprefixer": "^6.3.7", "babel-cli": "^6.10.1", "babel-core": "^6.10.4", "babel-jest": "^13.2.2", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.9.0", "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "jest-cli": "*", "node-sass": "^3.8.0", "react-addons-test-utils": "~15.1.0", "sass-loader": "^4.0.0", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.12.14", "react": "^15.3.0", "react-dom": "^15.3.0" },

I'm creating a react package called Supernova. So, in other project that i use this package (with npm link) this error is showing in the console:

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

This is my Supernova webpack config:

const webpack = require('webpack') const ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = { entry: './src/index.js', output: { library: 'Supernova', libraryTarget: 'umd', path: __dirname + '/build', filename: 'index.js', }, externals: [ { react: { root: 'React', commonjs2: 'react', commonjs: 'react', amd: 'react' } } ], module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' }, { test: /\.(scss|sass|css)$/, loader: ExtractTextPlugin.extract("style", "css!sass") }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[hash].[ext]' } ] }, resolve: { extensions: ['', '.js', '.jsx'] }, node: { Buffer: false }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new ExtractTextPlugin("[name].css"), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] }

And my component method render is:

render() { return ( <div className="sn-search-box"> {this.renderSelecteds()} <input ref="input" type="text" className="sn-search-box__input" placeholder={this.props.label} autoComplete="off" onFocus={this.handleInputFocus.bind(this)} onBlur={this.handleInputBlur.bind(this)}/> <span className="sn-search-box__input--icon"></span> {this.state.hasFocus ? this.renderResults() : null} {this.renderHelpMessage()} </div> ) }

My Supernova package.json

"peerDependencies": { "react": "^15.3.0", "react-dom": "^15.3.0" }, "dependencies": { "material-design-icons": "^2.2.3" }, "devDependencies": { "autoprefixer": "^6.3.7", "babel-cli": "^6.10.1", "babel-core": "^6.10.4", "babel-jest": "^13.2.2", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.9.0", "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "jest-cli": "*", "node-sass": "^3.8.0", "react-addons-test-utils": "~15.1.0", "sass-loader": "^4.0.0", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.12.14", "react": "^15.3.0", "react-dom": "^15.3.0" },

最满意答案

这是因为在同一个项目中加载了多个React副本 。 当您的软件包拥有自己的React副本并且您的项目消耗了您的软件包时，会发生这种情况。

当您将React作为package的dependency （超新星）时会发生这种情况。 您需要将React作为peerDependency 。 通过这样做，您的包将消耗您项目中的React。 如果项目中没有找到React，当您执行npm i supernova时，npm将抛出错误/警告。

npm peerDependencies

This is caused because of loading Multiple copies of React in a same project. This happens when your package has it own copy of React and you project which consumes your package has another.

This happen when you make React as a dependency in your package(supernova). You need to make React as a peerDependency. By doing this, your package will consume React from your project. If no React is found in the project, npm will throw an error/warning when you do npm i supernova.

npm peerDependencies