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

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

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

[AtlasMaxima]

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.