React+Node开发Shopify应用抛出无效元素类型报错问题咨询

你遇到的Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object错误，核心原因是ResourcePicker导入错误。
你当前从@shopify/app-bridge/actions引入的ResourcePicker是用于触发资源选择动作的普通JS对象，不是可直接渲染的React组件，React渲染时接收到object类型的节点，不符合组件要求的类/函数/原生标签字符串规则，因此抛出错误。

• 确认已安装@shopify/app-bridge-react依赖（你的App.jsx已经在使用这个包的其他组件，正常已经安装，不需要额外安装）
• 修改HomePage.jsx中的ResourcePicker导入路径，从React适配包导入组件，而非actions包
• 修正ResourcePicker的open属性绑定，不要硬编码为true，关联组件自身state，同时补充关闭弹窗的回调，避免弹窗无法正常关闭

修正后的HomePage.jsx代码如下：

import { Page } from "@shopify/polaris";
import React, { Component } from 'react';
// 修正：从app-bridge-react导入可渲染的React组件
import { ResourcePicker } from "@shopify/app-bridge-react";

class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    }
  }

  render() {
    return (
      <Page
        fullWidth
        title='Product Selector'
        primaryAction={{
          content: 'Select Products',
          onAction: () => this.setState({ open: true })
        }}>
        <ResourcePicker
          resourceType='Product'
          // 绑定state控制弹窗显隐
          open={this.state.open}
          // 取消选择时关闭弹窗
          onCancel={() => this.setState({ open: false })}
          // 选中资源后的处理逻辑
          onSelection={(selectedResources) => {
            // 这里写你自己的选中后业务逻辑
            console.log('已选中产品：', selectedResources);
            this.setState({ open: false });
          }}
        />
      </Page>
    )
  }
}

export default HomePage;

这类React渲染节点类型错误，排查时优先检查以下几点：

• 核对所有组件的导入导出是否匹配：默认导出的组件不要用命名导入，命名导出的组件不要用默认导入，导入路径是否正确
• 确认导入的内容是可渲染的React组件：不要把工具方法、普通对象、配置项当做组件放到JSX里渲染
• 检查高阶组件包裹是否正确：如果组件用了高阶组件包装，确认高阶组件最终返回的是合法的React组件，而非普通对象
• 检查组件名拼写：内置原生标签全小写，自定义组件首字母大写，避免拼写错误导致拿到undefined

内容的提问来源于stack exchange，提问作者Kunal Khichi