Closed as not planned
Closed as not planned
Description
Describe the bug
running storybook dev fails to compile with many errors that seems like it doesn't understand typescript
CSF Parsing error: Expected 'ObjectExpression' but found 'CallExpression' instead in 'CallExpression'.
10:55:22 AM [vite] Pre-transform error: /styleguide/components/containers/Flex/Flex.component.tsx: Unexpected token, expected "," (26:33)
24 | .reduce((passedProps, key) => ({ ...passedProps, [key]: props[key] }), {});
25 |
> 26 | const FlexBox = forwardRef((props: any, ref) => (
| ^
27 | <Box {...withFlexProps(props)} ref={ref} style={props.style} {...props} />
28 | ));
29 |
Error in error handler:
Error: offset is longer than source length! offset 440 > length 374
at numberToPos (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:12448:15)
at formatError (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50878:35)
at TransformContext.error (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50857:19)
at Object.transform (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:51175:25)
at async loadAndTransform (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:53923:29)10:55:24 AM [vite] Internal server error: //styleguide/components/containers/Flex/Flex.component.tsx: Unexpected token, expected "," (26:33)
24 | .reduce((passedProps, key) => ({ ...passedProps, [key]: props[key] }), {});
25 |
> 26 | const FlexBox = forwardRef((props: any, ref) => (
| ^
27 | <Box {...withFlexProps(props)} ref={ref} style={props.style} {...props} />
28 | ));
29 |
Plugin: storybook:react-docgen-plugin
File: /styleguide/components/Header/HeaderDropdownContent.component.jsx:26:33
19 | z-index: 100;
20 | position: absolute;
21 | top: ${({ theme }) => theme.header.height};
| ^
22 | ${({ direction }) =>
23 | direction === 'right'
at constructor (/node_modules/react-docgen/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:353:19)To Reproduce
tries several configurations but basically trying to work with these.
without docgen it works fine
export const getStorybookConfig = ({ alias = {}, stories = [] }): StorybookConfig => ({
typescript: {
reactDocgen: 'react-docgen-typescript',
},
stories,
viteFinal: config => {
if (!alias) return config;
// config.resolve.alias = { ...config.resolve.alias, ...alias };
return config;
},
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
framework: {
name: '@storybook/react-vite',
options: {},
},
core: {
disableTelemetry: true,
builder: '@storybook/builder-vite',
},
});
System
Storybook Environment Info:
System:
OS: macOS 14.4.1
CPU: (8) arm64 Apple M1 Pro
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.8.1 - ~/.volta/tools/image/node/20.8.1/bin/node
Yarn: 1.22.10 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn <----- active
npm: 10.1.0 - ~/.volta/tools/image/node/20.8.1/bin/npm
pnpm: 8.5.0 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 123.0.6312.107
Safari: 17.4.1Additional context
storybook 8.0.6
vite 5.2.8 or 4.5.0 - same error
Metadata
Metadata
Assignees
Type
Projects
Status
Done
Status
Done