I am not sure how this is done, but I am trying to use a dynamic import to import a module in storybook. The problem that I am facing, is that it cannot find the module:
`TypeError: Failed to resolve module specifier ‘@org/package/alert’
Do I need to tell the bundler that it needs to include all files in the @org/package
module? If so how?
What the function is doing:
iconInfo
find the icon in the list of avalible icons{categoryA: [{name:'alert',importPath:'@org/package/alert',content:'<svg>...</svg>'}]}
- if the icon wasn’t found return an empty element
- set an object with default values (these are overridden when the promise resolves)
- import the icon using the importPath
@org/package/alert
- This is where the error occurs
- return the icon element
const DisplayIcon = ({ iconName: name }) => {
const iconInfo = Object.entries(iconInformation)
.find(([_, icons]) => icons.find(info => info.name === name))?.[1]
.find(info => info.name === name);
if (!iconInfo) return <></>;
let importInfo: IconDef = {
name: '',
content: '',
isRichIcon: false,
};
console.log(iconInfo);
import(iconInfo.importPath).then((module: IconDef) => (importInfo = module));
return <Icon icon={importInfo} size={size} color={color} />;
};
export default {
title: 'Icons',
component: DisplayIcon,
} as Meta<typeof DisplayIcon>;