[Bug]: Cannot set property mark of #<Object> which has only a getter

TrejGun commented 4 months ago

Describe the bug

Strorybook cant render some components, crashed with error

Reproduction link

https://github.com/Gemunion/mui-rte

Reproduction steps

git clone git@github.com:Gemunion/mui-rte.git cd mui-rte npm i npm run storybook

navigate to http://localhost:6006/ switch to Custom Inline Toolbar

System

System:
    OS: macOS 14.4
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.4.0 - ~/.nvm/versions/node/v22.4.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v22.4.0/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.109
    Safari: 17.4
  npmPackages:
    @storybook/addon-essentials: 8.1.11 => 8.1.11 
    @storybook/addon-interactions: 8.1.11 => 8.1.11 
    @storybook/addon-links: 8.1.11 => 8.1.11 
    @storybook/addon-viewport: 8.1.11 => 8.1.11 
    @storybook/builder-webpack5: 8.1.11 => 8.1.11 
    @storybook/preset-create-react-app: 8.1.11 => 8.1.11 
    @storybook/react: 8.1.11 => 8.1.11 
    @storybook/react-webpack5: 8.1.11 => 8.1.11 
    storybook: 8.1.11 => 8.1.11

Additional context

fork-ts-checker-webpack-plugin seems outdated

greptile-apps[bot] commented 4 months ago

The error might be related to the rendering logic in Story.tsx or error handling in ErrorFormatter.tsx. Check these files for potential issues with property setting.

Story.tsx: Ensure that properties are correctly set and not overwritten. Specifically, review the InlineStory and IFrameStory components.
ErrorFormatter.tsx: Verify that the error handling logic does not attempt to set properties on objects that only have getters.

Example areas to check:

Story.tsx:

const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
// Ensure no properties are being set incorrectly
};

ErrorFormatter.tsx:

export const ErrorFormatter = ({ error }: ErrorFormatterProps) => {
// Ensure error properties are accessed correctly
};

References

/code/lib/blocks/src/components/Story.tsx /code/core/src/components/components/ErrorFormatter/ErrorFormatter.tsx /code/lib/cli/src/automigrate/fixes/cra5.ts /code/lib/cli/src/automigrate/fixes/webpack5.ts /code/lib/cli/src/automigrate/fixes/vue3.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

TrejGun commented 4 months ago

no, it is not related to the Story component. You can check the "Inline Toolbar" which is the same but without custom parameters - it works just fine

storybookjs / storybook