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