Astro Build Fastify SSR React-Select 组件不起作用

Question

我目前正在使用 Astro SSR 和 Fastify\Node 作为我的服务器。我创建了一个 SSR\Fastify 插件，它运行良好。不过，我遇到了一个问题，想看看其他人是否也遇到过类似的问题。我无法使用 React-Select 组件。在未启用 SSR 的情况下运行普通 Astro-Build 时效果良好。运行构建命令后，当页面尝试加载时，我收到以下错误消息：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。”

我倾向于进口问题，但没有运气缩小范围。

类型定义解析为：react-select/dist/react-selectcjs.d.ts

如果我也使用节点 ssr 插件，我也会得到同样的错误。我没有对 JSX 组件做任何花哨的事情，这是反应选择的用法：

import Select from "react-select"s
  <Select
                className="react-select info mx-5 w-100"
                classNamePrefix="react-select"
                name="singleSelect"
                value={pageSelect}
                onChange={(value) => {
                  gotoPage(value.value);
                  handlePageSelect(value);
                }}
                options={pageSelectData.map((prop, key) => {
                  return {
                    value: key,
                    label: "Page " + (key + 1),
                  };
                })}
                placeholder="Select page"
              />
              <Select
                className="react-select info mx-5 w-100"
                classNamePrefix="react-select"
                name="singleSelect"
                value={numberOfRows}
                onChange={(value) => {
                  console.log(value);
                  setPageSize(value.value);
                  setNumberOfRows(value);
                }}
                options={numberOfRowsData.map((prop) => {
                  return {
                    value: prop,
                    label: prop + " rows",
                  };
                })}
                placeholder="Select #rows"
              />

Answer 1

我发现了问题： 我有以下内容的 astro 布局： 侧边栏布局 导航栏布局 基础布局 页面布局 容器布局 块布局 块布局 表单布局

其中每一个都利用了 Jsx 组件。我的 ContainerLayout 和 SideBar 缺少 client:load 值。更正后，我的表单可以正确加载事件逻辑和所有内容，并使用 fastify 服务器运行。