Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

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

Copy link
Copy link
Open
@fergatron

Description

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

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

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.