How to dynamically import custom package with storybook? - reactjs

Question

So I have a custom private npm package which I want to dynamically imports it like so.
export default function SelectedIcon({path, ...props}: Props) {
const {data: icon} = require(`#mypackagelib/icons/${path}`)
return <Icon icon={icon} {...props} />
}
// I also tried to have it differently such as:
export default function SelectedIcon({path, ...props}: Props) {
const Component = React.lazy(() => import(`#mypackagelib/icons/${path}`))
return <Component {...props} />
}
// However, same error, so it seems like dynamically importing this is the problem
However, I got many errors, all the same message for different components in the library, from running Storybook
Module parse failed: Unexpected token (2:101)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /// <reference types="react" />
| import { PropA, PropB } from '../../File';
> declare function NameOfAComponent(props: PropA): JSX.Element;
| declare namespace NameOfAComponent {
| var data: PropB;
The weird thing that I don't understand is that, if I import the package like the below code, then it works
import OneOfTheComponent from '#mypackagelib/icons/OneOfTheComponent'
However, I have a case that I need to use dynamic import
I have the following config tsconfig.json when I build the #mypackagelib package with tsc and ts-node
{
"compilerOptions": {
"outDir": "dist",
"target": "ES2020",
"module": "commonjs",
"jsx": "react",
"lib": ["es6", "dom", "ES2020"],
"moduleResolution": "node",
"declaration": true,
"strict": true,
"skipLibCheck": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": false,
"esModuleInterop": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmitHelpers": true,
"importHelpers": true,
"pretty": false,
},
"ts-node": {
"swc": true
},
"exclude": [
"node_moduls_local",
"node_modules",
"dist"
],
"include": [
"types.d.ts",
"src/icons/**/*"
]
}
My main.js under ./storybook folder looks like this:
module.exports = {
stories: [
"../src/**/*.stories.#(ts|tsx)"
],
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-interactions",
"#storybook/preset-create-react-app",
{
name: 'storybook-addon-swc', // I thought adding this will works, but it doesn't
options: {
enable: true,
enableSwcLoader: true,
enableSwcMinify: true,
},
},
],
framework: "#storybook/react",
core: {
builder: 'webpack5',
},
experiments: {
topLevelAwait: true,
}
}
I think this might be webpack problem in general. What can I do to make it work? What loader do I need to add? What do my main.js file needs to look like? Why it needs a loader when I use dynamic imports but works fine if it's a normal import?