我目前正在使用React、Tailwind、HeadlessUI 和 Storybook开发 UI 库。一旦我完成了组件,并确保它们可以在 Storybook 和 React 开发服务器上工作,我就构建了它们并将它们打包到私有 npm package中。
当我使用创建的包将它们导入到测试项目中时,大多数都可以正常工作,但有些则不能。所有不工作的组件都有一个共同点:从@headlessui/react.
(工作组件不从 headlessui 导入任何内容)
当我尝试在测试项目中使用这些组件时,它们都抛出相同的错误:(
这里我选择组件“Select”作为示例)
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of 'Select'.
该错误实际上没有意义,因为这些组件从我的库导出并导入到我的测试项目中,与工作的组件完全相同。我什至通过在所有组件上使用简单的方法来检查这一点console.log。结果是一样的。
以下是它们的导入和导出方式:
// imported into …Run Code Online (Sandbox Code Playgroud)