Skip to content

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

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

Description

@fergatron
fergatron
opened on Apr 22, 2018

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

  1. vongdarakia commented on Jun 13, 2018

    @vongdarakia
    vongdarakia
    on Jun 13, 2018

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

  2. 8ozStudios commented on Jul 2, 2018

    @8ozStudios
    8ozStudios
    on Jul 2, 2018

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

  3. 8ozStudios commented on Jul 2, 2018

    @8ozStudios
    8ozStudios
    on Jul 2, 2018

    @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
    AtlasMaxima-zz
    on Oct 17, 2018

    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.

  5. codeglider commented on Jan 1, 2019

    @codeglider
    codeglider
    on Jan 1, 2019

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

  6. Hi-Rube commented on Feb 7, 2019

    @Hi-Rube
    Hi-Rube
    on Feb 7, 2019

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

  7. nkov commented on Apr 5, 2019

    @nkov
    nkov
    on Apr 5, 2019

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

  8. nkov commented on Apr 5, 2019

    @nkov
    nkov
    on Apr 5, 2019

    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

      Issue actions