Typescript error: `Property 'directions' does not exist on type '{ children?: ReactNode; }'.`

digital-nomad17 commented 6 years ago

Getting Help

Hi,

I am using the typescript definitions and I am running into this error:

Homestays.tsx
(45,16): Property 'directions' does not exist on type '{ children?: ReactNode; }'.

I copied the code(except the import statements) from the DirectionsRenderer example to test it out. Here is the code:

"/*global googlemaps*/"
import * as React from 'react';
import { compose, lifecycle, withProps} from "recompose";
import {
    GoogleMap,
    withGoogleMap,
    withScriptjs
} from "react-google-maps";
import DirectionsRenderer = google.maps.DirectionsRenderer;

const MapWithADirectionsRenderer = compose(
    withProps({
        containerElement: <div style={{ height: `400px` }} />,
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap,
    lifecycle({
        componentDidMount() {
            const DirectionsService = new google.maps.DirectionsService();

            DirectionsService.route({
                destination: new google.maps.LatLng(41.8525800, -87.6514100),
                origin: new google.maps.LatLng(41.8507300, -87.6512600),
                travelMode: google.maps.TravelMode.DRIVING,
            }, (result, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    this.setState({
                        directions: result,
                    });
                } else {
                    // console.error(`error fetching directions ${result}`);
                }
            });
        }
    })
)(props =>
    <GoogleMap
        defaultZoom={7}
        defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
    >
        {props.directions && <DirectionsRenderer directions={props.directions} />}
    </GoogleMap>
);

export default MapWithADirectionsRenderer

It looks like the property isn't defined in the typescript file.

Here's my dependency versions for the record:

{
  "name": "familyhomestay",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-google-maps": "^9.4.5",
    "react-scripts-ts": "2.16.0",
    "recompose": "^0.27.1"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/googlemaps": "^3.30.8",
    "@types/jest": "^22.2.3",
    "@types/markerclustererplus": "^2.1.33",
    "@types/node": "^10.1.4",
    "@types/react": "^16.3.14",
    "@types/react-dom": "^16.0.5",
    "@types/recompose": "^0.26.1",
    "typescript": "^2.8.3"
  }
}

@mxl You might have a better idea of this typescript issue.

vgrem commented 6 years ago

To eliminate this error, try to explicitly specify map component properties.

For that matter the following type could be introduced:

   type MapProps = {
        children?: React.ReactNode,
        directions: google.maps.DirectionsResult
    };

then a map component defined like this:

 const Map = (props: MapProps) => {
    return (
        <GoogleMap
            defaultZoom={7}
            defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
        >
            {props.directions && <DirectionsRenderer directions={props.directions} />}
        </GoogleMap>
    );
}

and

 const MapWithADirectionsRenderer = compose(
        withProps({
            containerElement: <div style={{ height: `400px` }} />,
            googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
            loadingElement: <div style={{ height: `100%` }} />,
            mapElement: <div style={{ height: `100%` }} />,
        }),
        withScriptjs,
        withGoogleMap,
        lifecycle({
            componentDidMount() {
                const DirectionsService = new google.maps.DirectionsService();

                DirectionsService.route({
                    destination: new google.maps.LatLng(41.8525800, -87.6514100),
                    origin: new google.maps.LatLng(41.8507300, -87.6512600),
                    travelMode: google.maps.TravelMode.DRIVING,
                }, (result, status) => {
                    if (status === google.maps.DirectionsStatus.OK) {
                        this.setState({
                            directions: result,
                        });
                    } else {
                        console.log(`error fetching directions ${result}`);
                    }
                });
            }
        })
    )(Map);

amon-shadow commented 4 years ago

Argument of type '(props: MapProps) => Element' is not assignable to parameter of type 'ComponentType'. Type '(props: MapProps) => Element' is not assignable to type 'FunctionComponent'. Types of parameters 'props' and 'props' are incompatible. Property 'directions' is missing in type '{ children?: ReactNode; }' but required in type 'MapProps'.ts(2345)

tomchentw / react-google-maps

Typescript error: `Property 'directions' does not exist on type '{ children?: ReactNode; }'.` #841

Getting Help