Repository navigation
Element ref was specified as a string (map) but no owner was set #199
Description
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:
- You may be adding a ref to a functional component
- You may be adding a ref to a component that was not created inside a component's render method
- 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 commentedon Jun 13, 2018
I have this same problem, and I'm unsure what's going on :/
8ozStudios commentedon Jul 2, 2018
I'm having the same issue, @fergatron @vongdarakia have you resolved it yet?
8ozStudios commentedon 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.
AtlasMaxima-zz commentedon Oct 17, 2018
I have react ^16.5.2 and I received this error because I didn't install
npm install --save google-maps-reactin the client folder. And I have just installed the package inside of the client folder and GoogleMaps is showing up now.codeglider commentedon Jan 1, 2019
@atlasmaxima what does it mean to install in a "client" folder?
Hi-Rube commentedon Feb 7, 2019
use like this:
nkov commentedon Apr 5, 2019
This works for me in development but not in production, minified mode.
nkov commentedon 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",