Element type is invalid: expected a string or a class/function (for composite components) but got: undefined

Question

I have made a separate component which can be considered as a child which I am calling in a parent component. While calling the component by importing it properly I am facing this issue

I have tried to create a separate method in order to call the component and then call the method which will bring the functionality of the component but no luck.

Below is the child component named as GlobalHeaderHelpLabel.js:

import React from "react";
import { Popover } from "@salesforce/design-system-react";
import { GlobalHeaderHelp } from "@salesforce/design-system-react";

const ipsum = "Lorem";

class GlobalHeaderHelpLabel extends React.Component {
  render() {
    return (
      <GlobalHeaderHelp
        popover={
          <Popover
            ariaLabelledby="help-heading"
            body={
              <div>
                <h2 className="slds-text-heading_small" id="help-heading">
                  Help and Training
                </h2>
                {ipsum}
              </div>
            }
            id="header-help-popover-id"
          />
        }
      />
    );
  }
}

export default GlobalHeaderHelpLabel;

Below is the parent component to which I am calling this child and facing the error named as GlobalHeaderLabel.js :

import React from "react";
import GlobalHeaderHelpLabel from "./GlobalHeaderHelpLabel";

class GlobalHeaderLabel extends React.Component {
  render() {
    return (
       <div>
          <GlobalHeaderHelpLabel />;
       </div>
    )
  }
}

Below is the 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.

Answer 1

Your Popover Component is exported as default. Change:

import {Popover} from '@salesforce/design-system-react';

to:

import Popover from '@salesforce/design-system-react';