我正在创建一个名为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 peerDependenciesThis 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更多推荐
发布评论