Skip to content

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

Open
@fergatron

Description

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

Activity

vongdarakia

vongdarakia commented on Jun 13, 2018

@vongdarakia

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

8ozStudios

8ozStudios commented on Jul 2, 2018

@8ozStudios

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

8ozStudios

8ozStudios commented on Jul 2, 2018

@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

AtlasMaxima-zz commented on Oct 17, 2018

@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

codeglider commented on Jan 1, 2019

@codeglider

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

Hi-Rube

Hi-Rube commented on Feb 7, 2019

@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

nkov commented on Apr 5, 2019

@nkov

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

nkov

nkov commented on Apr 5, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @fergatron@codeglider@8ozStudios@nkov@vongdarakia

        Issue actions

          Element ref was specified as a string (map) but no owner was set · Issue #199 · fullstackreact/google-maps-react