Shopify 中的 React 组件：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）

Question

我尝试在我的shopify remix应用程序中使用react-phone-input-2。

我尝试测试它，但收到错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。

有很多与此相关的帖子，但没有一个有帮助。

这是我的组件文件（JSX）

import React from 'react'; 
import { AppProvider } from '@shopify/polaris'; 
import PhoneInput from 'react-phone-input-2'; 
import 'react-phone-input-2/lib/style.css'; 


class PhoneInputField extends React.Component { 
        state = { phone: '', }; 
        handleOnChange = (value) => { this.setState({ phone: value }); }; 
    render() 
    { 
        return ( 
            <AppProvider> 
                <div> 
                <PhoneInput 
                    country={'us'} 
                    value={this.state.phone} 
                    onChange={this.handleOnChange} 
                    inputStyle={{ width: '100%' }} 
                    buttonStyle={{ border: 'none', background: 'none' }} 
                />
                </div> 
            </AppProvider> 
        );
    } 
} 

export default PhoneInputField;


// const PhoneInputField = ({ phone, setPhone }) => {
//     const handleOnChange = (value) => {
//       setPhone(value);
//     };
  
//     return (
//       <AppProvider>
//         <div>
//           <PhoneInput
//             country={'in'}
//             value={phone}
//             onChange={handleOnChange}
//             inputStyle={{ width: '100%' }}
//             buttonStyle={{ border: 'none', background: 'none' }}
//           />
//         </div>
//       </AppProvider>
//     );
//   };
  
//   export default PhoneInputField;

这是我正在使用的 app._index 文件

import { useEffect, useCallback, useState } from "react";
import { json } from "@remix-run/node";
import { useActionData, useNavigation, useSubmit } from "@remix-run/react";
import {
  Page,
  Layout,
  Text,
  Card,
  Button,
  BlockStack,
  Box,
  List,
  Link,
  InlineStack,
  AppProvider,
} from "@shopify/polaris";
import { TitleBar, useAppBridge } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";
import PhoneInputField from './PhoneInputField'; 


export default function Index() {
  const nav = useNavigation();
  const actionData = useActionData();
  const submit = useSubmit();
  const shopify = useAppBridge();
  const isLoading =
    ["loading", "submitting"].includes(nav.state) && nav.formMethod === "POST";
  const productId = actionData?.product?.id.replace(
    "gid://shopify/Product/",
    "",
  );

  useEffect(() => {
    if (productId) {
      shopify.toast.show("Product created");
    }
  }, [productId, shopify]);
  const generateProduct = () => submit({}, { replace: true, method: "POST" });
  const [phone, setPhone] = useState('010101');

  return (
    <Page>
      <TitleBar title="Remix app template">
        <button variant="primary" onClick={generateProduct}>
          Generate a product
        </button>
      </TitleBar>
      <BlockStack gap="500">
        <Layout>
          <Layout.Section>
            <Card>
              <BlockStack gap="500">
                <BlockStack gap="200">
                  <Text as="h2" variant="headingMd">
                    Congrats on creating a new Shopify app 🎉
                  </Text>
                  <Text variant="bodyMd" as="p">
                    This embedded app template uses{" "}
                    <Link
                      url="https://shopify.dev/docs/apps/tools/app-bridge"
                      target="_blank"
                      removeUnderline
                    >
                      App Bridge
                    </Link>{" "}
                    interface examples like an{" "}
                    <Link url="/app/additional" removeUnderline>
                      additional page in the app nav
                    </Link>
                    , as well as an{" "}
                    <Link
                      url="https://shopify.dev/docs/api/admin-graphql"
                      target="_blank"
                      removeUnderline
                    >
                      Admin GraphQL
                    </Link>{" "}
                    mutation demo, to provide a starting point for app
                    development.
                  </Text>
                  {/* <PhoneInputField phone={phone} setPhone={setPhone} /> */}
                  <PhoneInputField />
                </BlockStack>

我尝试了使用 class 以及 const 的旧方法，但没有成功

Answer 1

我发现问题了，

remix 正在尝试在服务器端渲染组件，因此请使用 remix utils 中的 ClientOnly

<ClientOnly>
 {() => <mycomponent />}
</ClientOnly>