Element ref was specified as a string (map) but no owner was set

[fergatron]

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);

[vongdarakia]

I have this same problem, and I'm unsure what's going on :/

[8ozStudios]

I'm having the same issue, @fergatron @vongdarakia have you resolved it yet?

[8ozStudios]

@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.

[AtlasMaxima-zz]

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.

[codeglider]

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

[Hi-Rube]

@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;

[nkov]

This works for me in development but not in production, minified mode.

[nkov]

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",