如何将 NPM 包添加到 Remix 路由文件答案

【问题标题】：How to add a NPM package to Remix route file如何将 NPM 包添加到 Remix 路由文件
【发布时间】：2022-07-18 22:57:00
【问题描述】：

在Remix GOTCHA file 之后，我正在尝试将 npm 包添加到路由文件中。在这种情况下，我们添加React-select。直接在路由文件中导入包是不行的，所以我们创建一个util文件来处理导出包。

我们应该像这样添加包：

import Select from 'react-select'

<Select options={[{ label: "label", value: "value" }]} />

在 REMIX 应用程序中，我们将尝试从 utils 文件中添加包。

utils/select.server.ts

export * from 'react-select';

然后我们在路由文件夹中导入这个

routes/index.tsx

import * as Select from '~/utils/react-select.server';

<Select options={options} />

导致浏览器出现如下错误

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

还有这个在编辑器中

JSX 元素类型“Select”没有任何构造或调用签名

我在这里错过了什么？

【问题讨论】：

【解决方案1】：

也许我误解了某些东西，但我认为您根本不需要使用 utils/select.server.ts 文件。

您在尝试直接导入时收到TypeError: Cannot read properties of undefined (reading 'root') 了吗？

根据阅读https://www.npmjs.com/package/react-select，我相信这个包是为了直接从客户端代码中使用，所以如果它由于在客户端中引用节点代码而引发错误，我会感到惊讶。

直接在客户端导入应该可以工作：

routes/index.tsx

import Select from 'react-select'

<Select options={options} />

再次，如果您已经尝试直接导入，我深表歉意。

【讨论】：