Error: element type is invalid

[mecmartini]

Hi,
I'm trying to integrate a react-leaflet-bing layer in my react-leaflet application with:

• react@16.8.2
• react-leaflet@2.2.1
• react-leaflet-bing@4.1.0

This is my react component:

import React, { Component } from 'react';
import { Pane } from 'react-leaflet';
import BingLayer from 'react-leaflet-bing';

const key = "xxxxxxxxxxxxxxxxxxxx";

class LeafletBingLayer extends Component {
  render() {
    return (
      <Pane name="bing-layer" style={{ zIndex: 1 }}>
        <BingLayer bingkey={key} type="Aerial" />
      </Pane>
    );
  }
}

export default LeafletBingLayer;

but I get the following errors and a blank page:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at LeafletBingLayer.js:11.
    in LeafletBingLayer (at MapContainer.js:224)
    in div (created by Map)
    in Map (created by Context.Consumer)
    in StyledComponent (created by Styled(Map))
    in Styled(Map) (at MapContainer.js:205)
    in MapContainer (at MapWrapper.js:680)
    in section (created by Context.Consumer)
    in StyledComponent (created by styled.section)
    in styled.section (at MapWrapper.js:670)
    in MapWrapper (at MapToolPage.js:14)
    in MapToolPage (created by NamespacesConsumerComponent)
    in NamespacesConsumerComponent (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace)
    in LoadNamespace (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in LoadNamespace(MapToolPage) (created by Route)
    in Route (at MainSection.js:24)
    in Switch (at MainSection.js:18)
    in section (at MainSection.js:17)
    in MainSection (at App.js:35)
    in div (at App.js:34)
    in ScrollToTop (created by Route)
    in Route (created by withRouter(ScrollToTop))
    in withRouter(ScrollToTop) (at App.js:29)
    in Router (created by HashRouter)
    in HashRouter (at App.js:27)
    in div (at App.js:19)
    in App (created by NamespacesConsumerComponent)
    in NamespacesConsumerComponent (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace)
    in LoadNamespace (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in LoadNamespace(App) (at src/index.js:6)

The above error occurred in the <div> component:
    in div (created by Pane)
    in Pane (created by Context.Consumer)
    in ForwardRef(Leaflet(Pane)) (at LeafletBingLayer.js:10)
    in LeafletBingLayer (at MapContainer.js:224)
    in div (created by Map)
    in Map (created by Context.Consumer)
    in StyledComponent (created by Styled(Map))
    in Styled(Map) (at MapContainer.js:205)
    in MapContainer (at MapWrapper.js:680)
    in section (created by Context.Consumer)
    in StyledComponent (created by styled.section)
    in styled.section (at MapWrapper.js:670)
    in MapWrapper (at MapToolPage.js:14)
    in MapToolPage (created by NamespacesConsumerComponent)
    in NamespacesConsumerComponent (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace)
    in LoadNamespace (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in LoadNamespace(MapToolPage) (created by Route)
    in Route (at MainSection.js:24)
    in Switch (at MainSection.js:18)
    in section (at MainSection.js:17)
    in MainSection (at App.js:35)
    in div (at App.js:34)
    in ScrollToTop (created by Route)
    in Route (created by withRouter(ScrollToTop))
    in withRouter(ScrollToTop) (at App.js:29)
    in Router (created by HashRouter)
    in HashRouter (at App.js:27)
    in div (at App.js:19)
    in App (created by NamespacesConsumerComponent)
    in NamespacesConsumerComponent (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in WithMergedOptions(NamespacesConsumerComponent) (created by LoadNamespace)
    in LoadNamespace (created by WithMergedOptions)
    in WithMergedOptions (created by Context.Consumer)
    in LoadNamespace(App) (at src/index.js:6)

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[wanzhuM]

try
import { BingLayer } from 'react-leaflet-bing' instead