I am currently working on developing a custom Storybook 7 Typescript component library with React. I have successfully imported this library into another project using a private NPM package.
However, one of the components in the library, specifically the "Select" component, is causing an error upon import into the project:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function ... Check the render method of Select.After verifying my imports in the library, I couldn't find anything wrong or different from other components that are loading properly. Strangely enough, the Select component functions perfectly within Storybook.
The issue arises when I integrate this component into a website I'm building using the library. I suspect it might be related to the imports inside the Select component, but after cross-checking them with the export files, everything seems to be in order.
Below is the code snippet for Select.tsx:
import React, { Fragment, useState } from 'react';
import { Listbox, Transition } from '@headlessui/react';
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
// Rest of the component's code...
It's worth noting that the component operates flawlessly in Storybook environments.
This is how the component is exported from index.ts:
import { Select } from './components/Select';
// ...
export { ..., Select };
And here's how I import the component into another segment of the library. Although I primarily use the Select component through SearchResultHeader, I also attempted importing the Select component independently with no success.
import { ..., SearchResultHeader, Select } from "@naos/ioe-ui-library";
Thank you in advance to everyone providing assistance!