Error: The type property must be definedn in mapbox-gl-js

Question

I have problem in adding source to map.

import * as data from "./temp-data";
 map.addSource('source__demo__empty',data.getEmptySource);
        map.addLayer(data.getLayer(false,'source__demo__empty','source__demo__empty',
            'green',true
        ));

./temp-data

export const getLayer=(hovered,layerId,sourceId,color,activeRoute)=>{
    const layer = {
        'id': layerId,
        'type': 'line',
        'source': sourceId,
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': color,
            'line-width': 4,
            'line-dasharray':[1,2,3],
            'line-opacity':activeRoute==true?1:0.5
        }
      }

      return layer
}

export function getEmptySource(){
    return {
      'type':'geojson',
      'data':{
          'type':'Feature',
          'properties':{},
          'geometry':{
              'type':'LineString',
              'coordinates':[
                  [76.993894,31.781929]
              ]
          }
      }
    }
}

With the above code i am getting this error.

Error: The type property must be defined, but only the following properties were given: .

mapbox-gl.js:35 Uncaught Error: The type property must be defined, but only the following properties were given: .
    at i.addSource (mapbox-gl.js:35)
    at r.addSource (mapbox-gl.js:35)
    at r.<anonymous> (DynamicRoute.jsx:8)
    at r.zt.fire (mapbox-gl.js:31)
    at r._render (mapbox-gl.js:35)
    at mapbox-gl.js:35

If i change

map.addSource('source__demo__empty',data.getEmptySource);

to

map.addSource('source__demo__empty', {
            'type':'geojson',
            'data':{
                'type':'Feature',
                'properties':{},
                'geometry':{
                    'type':'LineString',
                    'coordinates':[
                        [76.993894,31.781929]
                    ]
                }
            }
          });

then i am not getting any error.

addSource takes an object and id. I am passing id as the first parameter and object as the second parameter. Then why this error is appearing.

Answer 1

Your error is because you are passing the function reference, not actually calling it.

Change this:

map.addSource('source__demo__empty',data.getEmptySource);

to this:

map.addSource('source__demo__empty',data.getEmptySource());