title: React Package with Webpack - Only a ReactOwner can have refs
body: <p>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:</p>
  
  <blockquote>
    <p>Only a ReactOwner can have refs. You might be adding a ref to a
    component that was not created inside a component's <code>render</code> method,
    or you have multiple copies of React loaded</p>
  </blockquote>
  
  <p>This is my Supernova webpack config:</p>
  
  <pre><code>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&amp;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')
      })
    ]
  }
  </code></pre>
  
  <p>And my component method render is:</p>
  
  <pre><code>  render() {
      return (
        &lt;div className="sn-search-box"&gt;
          {this.renderSelecteds()}
  
          &lt;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)}/&gt;
  
          &lt;span className="sn-search-box__input--icon"&gt;&lt;/span&gt;
  
          {this.state.hasFocus ? this.renderResults() : null}
          {this.renderHelpMessage()}
        &lt;/div&gt;
      )
    }
  </code></pre>
  
  <p>My Supernova package.json</p>
  
  <pre><code>"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"
    },
  </code></pre>