Open
Description
Describe the bug
I want to use an absolute path alias instead of a relative path in the MDX file for the documentation.
I have this button.mdx
file:
import { Meta, Canvas } from '@storybook/blocks'
import * as ButtonStories from './button.stories'
import * as DropdownButtonStories from '../../dropdown-button/dropdown-button.stories'
import { Typography } from '../../../components'
<Meta of={ButtonStories} />
....
<Typography variant="heading" fontSize={300} fontWeight={400}>
Related Components
</Typography>
<Canvas
of={DropdownButtonStories.Default}
/>
I would like to know if it is possible to use it like this:
import { Meta, Canvas } from '@storybook/blocks'
import * as ButtonStories from './button.stories'
import * as DropdownButtonStories from 'components/dropdown-button/dropdown-button.stories'
import { Typography } from 'components'
<Meta of={ButtonStories} />
....
<Typography variant="heading" fontSize={300} fontWeight={400}>
Related Components
</Typography>
<Canvas
of={DropdownButtonStories.Default}
/>
I tried with modification of the main.js file, but it doesn't work:
async viteFinal(config) {
return mergeConfig(config, {
resolve: {
alias: {
'components': resolve(__dirname, '../src/components'),
},
},
plugins: [tsconfigPaths()],
})
},
The following error occurs:
Reproduction link
https://stackblitz.com/edit/github-xgzeyx?file=vite.config.ts
Reproduction steps
No response
System
I'm using Storybook v8.4.2
Additional context
No response
Activity