addon-controls: Requests multiplying with each change

Describe the bug When I edit a control value, the number of requests made to do so doubles from the previous attempt:

To Reproduce Steps to reproduce the behavior:

1. Set up a Rails app with Webpack.
2. Configure view_component_storybook for it by following their Getting Started guide. In addition, configure CORS headers according to my comment here, configure asset hosts, and change the root to spec/components/stories.
3. Create a component using rails generate component Button button_text. Copy the stories they’ve written in the view_component_storybook README into spec/components/stories/button_component_stories.rb, and run rake view_component_storybook:write_stories_json.
4. Install Storybook with npx -p @storybook/cli sb init -t html
5. Override the configs with those I’ve left under Code snippets.
6. Run rails s in one terminal instance and yarn storybook in another.
7. The browser should open your Storybook instance.
8. In either of the stories, change the Button Text control value by adding or removing a character.

Expected behavior

One request is made per change to an attribute.

Screenshots

Code snippets

.storybook/main.js

module.exports = {
  stories: ["../spec/components/**/*.stories.json"],
  addons: [
    "@storybook/addon-controls",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
}

.storybook/preview.js

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  server: {
    url: `http://localhost:3000/rails/stories`,
  },
}

Generated JSON

{
  "title": "Button Component",
  "stories": [
    {
      "name": "with_short_text",
      "parameters": {
        "server": {
          "id": "button_component/with_short_text"
        }
      },
      "args": {
        "button_text": "OK"
      },
      "argTypes": {
        "button_text": {
          "control": {
            "type": "text"
          },
          "name": "Button Text"
        }
      }
    },
    {
      "name": "with_long_text",
      "parameters": {
        "server": {
          "id": "button_component/with_long_text"
        }
      },
      "args": {
        "button_text": "Push Me Please!"
      },
      "argTypes": {
        "button_text": {
          "control": {
            "type": "text"
          },
          "name": "Button Text"
        }
      }
    }
  ]
}

System

Environment Info:

  System:
    OS: Linux 5.9 Manjaro Linux
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
  Binaries:
    Node: 14.15.5 - ~/.asdf/installs/nodejs/14.15.5/bin/node
    Yarn: 1.22.5 - ~/.asdf/installs/nodejs/14.15.5/.npm/bin/yarn
    npm: 6.14.11 - ~/.asdf/installs/nodejs/14.15.5/bin/npm
  Browsers:
    Firefox: 87.0
  npmPackages:
    @storybook/addon-actions: ^6.2.1 => 6.2.1 
    @storybook/addon-controls: ^6.2.1 => 6.2.1 
    @storybook/addon-essentials: ^6.2.1 => 6.2.1 
    @storybook/addon-links: ^6.2.1 => 6.2.1 
    @storybook/html: ^6.2.1 => 6.2.1 
    @storybook/server: ^6.2.1 => 6.2.1 

Additional context I imagine it’s probably possible to replicate even without the ViewComponent setup.

The first half of the requests that are sent have this traceback:

The second half of the requests call _renderMain from render.js:95 before the first call to renderMain in the above traceback.

[boardfish]

I’ve just pulled together a reduced test case and the bug isn’t present. It’s not exactly identical at the time of writing because I haven’t configured some dependencies like Hotwire and Tailwind, but I’ll see if introducing those provokes the bug.

[boardfish]

Okay - I found this in the docs, which fits my use case perfectly. However,

const path = require("path")

const custom = require("../config/webpack/environment.js").toWebpackConfig()

module.exports = {
  webpackFinal: (config) => {
    return { ...config, module: { ...config.module, rules: custom.module.rules } }
  },
  stories: ["../spec/components/**/*.stories.json"],
  addons: ["@storybook/addon-controls"],
}

Whether I prefix the function with async or not, Storybook claims not to be able to find any stories. They’re definitely there, and if I start Storybook without webpackFinal in the exports, the stories show just fine.

ls ../spec/components/**/*.stories.json                                                                                                                                                              
../spec/components/stories/button_component.stories.json