Shopify Remix应用中react-phone-input-2组件报错求助

架构老林

2026-6-22

解决Shopify Remix中react-phone-input-2组件的类型错误

这个错误几乎都是导入方式错误或者未处理Remix的SSR限制导致的，以下是具体修复步骤：

1. 修正组件导入方式

react-phone-input-2是默认导出的组件，如果你用了命名导入，会拿到一个模块对象而非组件本身，直接使用就会触发该错误。

错误写法：

import { PhoneInput } from 'react-phone-input-2'; // 错误：组件为默认导出，不能用命名导入

正确写法：

import PhoneInput from 'react-phone-input-2'; // 正确：默认导入组件

同时别忘了导入组件样式：

import 'react-phone-input-2/lib/style.css';

2. 适配Remix的服务端渲染（SSR）

Remix默认会在服务端渲染所有组件，但react-phone-input-2依赖浏览器DOM环境，直接在服务端渲染会报错，需要把使用该组件的文件标记为客户端组件：

在组件文件最顶部添加'use client'指令（Remix v1.19及以上版本支持）：

'use client'; // 必须放在文件第一行
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';
import { useState } from 'react';

export function CheckoutPhoneInput() {
  const [phone, setPhone] = useState('');

  return (
    <PhoneInput
      country="cn"
      value={phone}
      onChange={setPhone}
      inputProps={{
        name: 'phone',
        required: true
      }}
    />
  );
}

如果你的Remix版本较低，无法使用'use client'，可以用动态导入+Suspense包裹：

import { Suspense, lazy } from 'react';

const PhoneInput = lazy(() => import('react-phone-input-2'));

export function CheckoutPhoneInput() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <PhoneInput country="cn" />
    </Suspense>
  );
}

注意这种方式需要单独在全局或根布局中导入样式文件。