Currently, I am integrating Storybook with nextjs and webpack. Below is my configuration in .storybook/main.ts:
import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
...
framework: {
name: '@storybook/nextjs',
options: {},
},
...
};
export default config;
This setup seamlessly utilizes TypeScript settings from the tsconfig.json within this workspace, which is a great feature. My goal is to introduce some TypeScript path aliases exclusively for Storybook. Despite attempting various strategies inspired by multiple responses on Stack Overflow, such as defining aliases like @/components, Storybook continues to throw errors.
const config: StorybookConfig = {
...
webpackFinal: (config) => {
if (config.resolve) {
config.resolve.alias = {
...config.resolve.alias,
'@/*': [
'./src/*',
'../../packages/ui-lib/src/*',
],
};
}
return config;
},
};
Interestingly, when I include these aliases directly in my tsconfig.json file, Storybook functions correctly. However, I prefer not to do so because it would mean exposing the source code structure of the ui-lib folder to the overall workspace's tsconfig.
Can anyone shed light on why this approach is failing?
P.S. I also experimented with alternative path configurations like
path.resolve(__dirname, "../../packages/ui-lib/src")