Rendered more hooks than during the previous render.

[damianfabian]

Hi!

I have been trying to use the plugin with React and found this issue, I track the problem to be some decorator inside a file called story-decorator.js. Below steps to reproduce:

1. Open a Story in Canvas Mode
2. Go to Docs Mode
3. Get back to Canvas Mode
4. You should get the error.

Below you can see my configuration for Storybook:

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  staticDirs: ["../public"],
  addons: [
    "storybook-addon-live-examples",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-interactions",
  ],
  features: {
    postcss: false,
  },
  framework: "@storybook/react",
  core: {
    builder: "webpack4",
  },
};

and this is my preview.js file:

import { addons } from '@storybook/addons';
import { LIVE_EXAMPLES_ADDON_ID } from 'storybook-addon-live-examples';
import { GridView, Table } from '@rendering/components'
import './styles.css';

addons.setConfig({
  [LIVE_EXAMPLES_ADDON_ID]: {
      // custom theme from prism-react-renderer (optional)
      // editorTheme: theme,
      // internationalization (optional)
      copyText: ['Copy', 'Copied'],
      expandText: ['Show code', 'Hide code'],
      shareText: ['Share', 'Shared'],
      // scope (globally accessible components & functions) (optional)
      scope: {
          GridView,
          Table
      },
  },
});

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

This is an example of a Story:

import React from 'react';
import { GridView } from '@rendering/components';
import mdx from './Grid.mdx';

const Template = (args) => {
    const gridParams = {
        title: 'Grid Example',
        titleField: 'name',
        data: [
            { name: 'Ferre' , age: 32 },
            { name: 'Eric' , age: 38 },
            { name: 'Clark' , age: 28, phone: 329832 }
        ],
        loading: false,
        itemRender:
            (item) => <div className='card-item-example'>
                <div style={{ width: '100%', height: '230px', backgroundColor: '#f3f3f3'}} />
                <div className='content'>
                    <h2>{item.name}</h2>
                    <p>Some lorem ipsum description</p>
                </div>
            </div>
    }

    return <GridView {...Object.assign({}, gridParams, args)} />
}

export const Basic = Template.bind({});
Basic.args = {
    title: 'Grid Example',
    titleField: 'name',
    data: [
        { name: 'Ferre' , age: 32 },
        { name: 'Eric' , age: 38 },
        { name: 'Clark' , age: 28, phone: 329832 }
    ],
    loading: false,
    itemRender:
        (item) => <div className='card-item-example'>
            <div style={{ width: '100%', height: '230px', backgroundColor: '#f3f3f3'}} />
            <div className='content'>
                <h2>{item.name}</h2>
                <p>Some lorem ipsum description</p>
            </div>
        </div>
}

If someone can give me a hint of what I need to solve, I would probably fix it, but I don't know where to start looking at. Thanks!

[cha0wg]

same error😥

[cha0wg]

@damianfabian try to lock your @storybook/addon to ^6.3.0 may resolve your issue. I changed it from 6.5.13 to 6.3.7 and the errors gone https://github.com/reme3d2y/storybook-addon-live-examples/blob/main/package.json#L61

"peerDependencies": {
        "@storybook/addon-docs": "^6.3.0",
        "@storybook/addons": "^6.3.0",
        "@storybook/api": "^6.3.0",
        "@storybook/components": "^6.3.0",
        "@storybook/core-events": "^6.3.0",
        "@storybook/theming": "^6.3.0",
        "react": "^16.8.0 || ^17.0.0",
        "react-dom": "^16.8.0 || ^17.0.0"
    },