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.

I updated from react-apollo to latest apollo-client in order to use hooks and got the above error.

My package.json is

    "@apollo/client": "^3.1.3",
    "apollo-boost": "^0.4.9",
    "next": "^9.5.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",

My product-list.js file is:

import gql from 'graphql-tag';
import { Query, useQuery } from '@apollo/client';
import React, { useCallback, useEffect, useState } from "react";
import {
  Badge,
  Banner,
  Card,
  ChoiceList,
  Filters,
  Frame,
  Layout,
  Pagination,
  Page,
  ResourceList,
  SkeletonPage,
  Spinner,
  Stack,
  Tooltip,
  TextStyle,
  Thumbnail,
} from '@shopify/polaris';
import ProductMap from '../components/product-map';

...


function ProductList() {

  const [selectedItems, setSelectedItems] = useState([]);
  const [sheetActive, setSheetActive] = useState(false);
  const [selected, setSelected] = useState([]);
  const [cursor, setCursor] = useState(null);
  const [numProducts, setNumProducts] = useState(5);
  const [updateView, setUpdateView] = useState(0);
  const [productType, setProductType] = useState(null);
  const [queryValue, setQueryValue] = useState(null);
  const [filterValue, setFilterValue] = useState({ filter: '' });
  const [productTypes, setProductTypes] = useState([]);
  const [choices, setChoices] = useState([]);
  const {data: choicesData, error: choicesError, loading: choicesLoading } = useQuery(PRODUCT_TYPES);

  useEffect(() => {
    if(!choicesLoading && choicesData){
      let choicesArr = [];
      data.shop.productTypes.edges.map((productType) => {
        return choicesArr.push({
          label: productType.node,
          value: productType.node
        });
      }
      );      
      setChoices(choicesArr);
    }
  }, [choicesLoading, choicesData])

  if(choicesLoading){
    <div>Loading...</div>
  } 
  if(choicesError){
    <div>Error...</div>
  }

  const handleProductTypeChange = useCallback(
    (value) => {
      setProductType(value);
      updateProductTypeFilter(value);
    },
    []
  );

  const updateProductTypeFilter = (value) => {

    let filterPart = '';

    //if its more than one productType
    if (productType.length > 1) {
      for (let i = 0; i < productType.length; i++) {
        if (productType[i] < productType.length - 1) {
          filterPart = filterPart + ' OR ' + productType[i] + ' OR ';
        } else {
          filterPart = filterPart + productType[i];
        }
        console.log('filterPart: ' + filterPart);
      }
      setFilterValue(
        { filter: 'product_type:' + filterPart },
        console.log("set filter to: " + filterPart)
      )
    }

  }


  const updateFilter =
    (value) => {
      setTimeout(function () {
        value ?
          setFilterValue(
            { filter: `title:${value}*` },
            console.log("set filter to: " + value)
          ) :
          setFilterValue(
            { filter: `` },
            console.log("set filter to: ")
          )
      }, 1000)
    }

...

}

export default ProductList;