从带有钩子的react-apollo更新为apollo-client后，得到“元素类型无效：应为字符串，但未定义”

问题描述

我从react-apollo更新到最新的apollo-client，以便使用钩子并得到错误：

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.

我的package.json是

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

我的product-list.js文件是：

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;

完整堆栈跟踪：

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.
    in ProductList
    in Index
    in Context.Provider
    in Context.Consumer
    in ApolloProvider
    in Context.Provider
    in FocusManager
    in Context.Provider
    in MediaQueryProvider
    in div
    in Context.Provider
    in ThemeProvider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppProvider
    in Context.Provider
    in Provider
    in Fragment
    in MyApp
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer
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.
    at ReactDOMServerRenderer.render (/mnt/c/Users/jamie/projects/shopify/shopify-integration/node_modules/react-dom/cjs/react-dom-server.node.development.js:3743:17)
    at ReactDOMServerRenderer.read (/mnt/c/Users/jamie/projects/shopify/shopify-integration/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at renderToString (/mnt/c/Users/jamie/projects/shopify/shopify-integration/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
    at Object.renderPage (/mnt/c/Users/jamie/projects/shopify/shopify-integration/node_modules/next/dist/next-server/server/render.js:48:686)       
    at Function.getInitialProps (/mnt/c/Users/jamie/projects/shopify/shopify-integration/.next/server/pages/_document.js:276:19)
    at loadGetInitialProps (/mnt/c/Users/jamie/projects/shopify/shopify-integration/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/mnt/c/Users/jamie/projects/shopify/shopify-integration/node_modules/next/dist/next-server/server/render.js:48:977)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async /mnt/c/Users/jamie/projects/shopify/shopify-integration/node_modules/next/dist/next-server/server/next-server.js:76:329

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）