Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs

[cparjaszewski]

When I'm trying to render Map with MarkerGroup I'm getting this error:

render() {
  const data = { type: "GeometryCollection", geometries: [] };
  return (
  <div id={ mapContainer }>
    <Map
      projection= { 'equirectangular' }
      translate= { [480, 480 ] } >
      <MarkerGroup
        key={ "polygon-test" }
        data= { data }
        markerClass= { "your-marker-css-class" }
      />
    </Map>
  </div>
  )
}

Invariant Violation: 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://fb.me/react-refs-must-have-owner).

Here is part of my package.json:

 "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-async-to-generator": "^6.16.0",
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-polyfill": "^6.20.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-es2016": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "case-sensitive-paths-webpack-plugin": "^1.1.4",
    "clean-webpack-plugin": "^0.1.14",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "eslint": "^3.12.2",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-react": "^6.10.0",
    "extract-text-webpack-plugin": "beta",
    "file-loader": "^0.9.0",
    "node-sass": "^4.1.0",
    "sass-loader": "^4.1.0",
    "stylelint": "^7.8.0",
    "stylelint-scss": "^1.4.1",
    "webpack": "2.2.0",
    "webpack-dev-server": "2.2.0"
  },
  "dependencies": {
    "d3": "^4.6.0",
    "d3-geo-projection": "^1.2.1",
    "leaflet": "^1.0.2",
    "lodash": "^4.17.4",
    "moment": "^2.17.1",
    "normalize.css": "^5.0.0",
    "numeral": "^2.0.4",
    "react": "^15.4.1",
    "react-d3-map": "^0.8.3",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0",
    "sg-service-registry": "^0.1.1",
    "style-loader": "^0.13.1",
    "topojson": "^2.2.0",
    "whatwg-fetch": "^2.0.2"
  },

[nmitha]

For me this was caused by the devDependencies of react-d3-map-core containing react, which causes duplicate react libraries to get loaded. I'm using yarn, so this behavior might not happen with 'npm install' ?

One solution I found is to change webpack config to add something like the following:

resolve: {
        alias: {
            "react": __dirname + '/node_modules/react',
        }
 }

But in my case I'm using create-react-app so I don't have direct access to webpack config. So my solution was to use react-app-rewired, and then in its config-overrides.js file in the override function I added these lines:

// Force all react references to resolve to the main one (fixes issue with react-d3-map-core devDependencies)
    config.resolve = config.resolve || {};
    config.resolve.alias = config.resolve.alias || {};
    config.resolve.alias['react'] = path.join(__dirname, 'node_modules', 'react');
    return config;