Description

fergatron

opened on Apr 22, 2018

Issue body actions

Hi, I'm getting an error when I attempt to load the Map component.

Uncaught Error: Element ref was specified as a string (map) but no owner was set. This could happen for one of the following reasons:

1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
   See https://fb.me/react-refs-must-have-owner for more information.
   at invariant (VM56119 invariant.js:42)
   at coerceRef (VM56126 react-dom.development.js:7350)
   at createChild (VM56126 react-dom.development.js:7555)
   at reconcileChildrenArray (VM56126 react-dom.development.js:7805)
   at reconcileChildFibers (VM56126 react-dom.development.js:8121)
   at reconcileChildrenAtExpirationTime (VM56126 react-dom.development.js:8240)
   at reconcileChildren (VM56126 react-dom.development.js:8231)
   at updateHostComponent (VM56126 react-dom.development.js:8539)
   at beginWork (VM56126 react-dom.development.js:8986)
   at performUnitOfWork (VM56126 react-dom.development.js:11814)

Below is my dependency list. I attempted to degrade react to ^15.0.0, but other packages broke.

"dependencies": {
"chart.js": "^2.7.2",
"google-maps-react": "^2.0.0",
"highcharts": "^6.1.0",
"moment": "^2.22.1",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-chartjs-2": "^2.7.0",
"react-dates": "^16.6.1",
"react-dom": "^16.3.2",
"react-highcharts": "^16.0.2",
"react-router-dom": "^4.2.2",
"react-vis": "^1.9.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.7.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.8.3",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
}

and here's my Map component:

import React, { Component } from 'react';
import { GoogleApiWrapper, Map as GoogleMap } from 'google-maps-react';

class Map extends Component {
    render() {
        const style = {
            width: '100vw',
            height: '100vh'
        };
        return (
            <div style={style}>
                <GoogleMap 
                    google={this.props.google}
                />
            </div>
        );
    }
}

export default GoogleApiWrapper({
    apiKey: "MY_API_KEY"
})(Map);

Reacted by Akia Vongdara, Mark Pruce, Vivek Soni, Stephen Grable, Nick and James S. Parker

Activity

1. vongdarakia commented on Jun 13, 2018

   

   vongdarakia

   on Jun 13, 2018

   More actions

   I have this same problem, and I'm unsure what's going on :/
2. 8ozStudios commented on Jul 2, 2018

   

   8ozStudios

   on Jul 2, 2018

   More actions

   I'm having the same issue, @fergatron @vongdarakia have you resolved it yet?
3. 8ozStudios commented on Jul 2, 2018

   

   8ozStudios

   on Jul 2, 2018

   More actions

   @fergatron @vongdarakia This package is not compatible with React 16+. I downgraded my React to 15.x.x according to this article and I got past that error. Of course, this may break other package compatibilities depending on your project.

   In case you are a beginner like me, after making this change to React versions, you need to wipe out node_modules and package-lock.json, then run npm install again.
4. AtlasMaxima-zz commented on Oct 17, 2018

   

   AtlasMaxima-zz

   on Oct 17, 2018

   More actions

   I have react ^16.5.2 and I received this error because I didn't install npm install --save google-maps-react in the client folder. And I have just installed the package inside of the client folder and GoogleMaps is showing up now.

   Reacted by codeglider
5. codeglider commented on Jan 1, 2019

   

   codeglider

   on Jan 1, 2019

   More actions

   @atlasmaxima what does it mean to install in a "client" folder?
6. Hi-Rube commented on Feb 7, 2019

   

   Hi-Rube

   on Feb 7, 2019

   More actions

   @atlasmaxima what does it mean to install in a "client" folder?

   use like this:

   import React, { Component } from 'react';
   import { GoogleApiWrapper, Map as GoogleMap } from 'google-maps-react';
   
   class Map extends Component {
       render() {
           const style = {
               width: '100vw',
               height: '100vh'
           };
           return (
               <div style={style}>
                   <GoogleMap 
                       google={this.props.google}
                   />
               </div>
           );
       }
   }
   
   const MapWrapper = GoogleApiWrapper({
       apiKey: "MY_API_KEY"
   })(Map);
   
   class ExportMap extends Component{
       render(){
           return (<MapWrapper/>)
       }
   }
   export default ExportMap;

   Reacted by Nick
7. nkov commented on Apr 5, 2019

   

   nkov

   on Apr 5, 2019

   More actions

   This works for me in development but not in production, minified mode.
8. nkov commented on Apr 5, 2019

   

   nkov

   on Apr 5, 2019

   More actions

   I issued a PR to solve this issue by using callback refs instead of string refs. Feel free to use my branch until it's merged here:

   "google-maps-react": "nkov/google-maps-react#ref-bug",

Issue actions