Standalone preview does not support addon-actions
Closed this issue · 8 comments
Describe the bug
addon-actions does not work with the standalone approach in https://github.com/storybookjs/storybook/tree/next/examples/standalone-preview due to cross-frame constraints.
In addition, even without addon-actions, there are click listener warnings in console that suggest other things may be broken.
To Reproduce
Steps to reproduce the behavior:
- Go to a story using addon-actions
- Click on a button that triggers an action
- See error in console
- See no action message logged
Expected behavior
Message logged in action pane.
System:
System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 8.16.1 - ~/.nvm/versions/node/v8.16.1/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.16.1/bin/npm
Browsers:
Chrome: 78.0.3904.70
Safari: 13.0.3
npmPackages:
@storybook/addon-console: ^1.2.1 => 1.2.1
@storybook/addon-knobs: ^5.2.5 => 5.2.5
@storybook/addon-notes: ^5.2.5 => 5.2.5
@storybook/react: ^5.2.5 => 5.2.5
Additional context
Using parcel for standalone build.
cc @RPDeshaies would you mind taking a look at this?
I can have a look when I have some free time this week. I'm using parcel and the actions add-ons in a project and I have no issues on my end. If you have a repo to reproduce the issue that could help me a lot.
Hi @RPDeshaies , repro at https://github.com/ryascl/storybook-standalone-preview .
Thanks!
Blocked a frame with origin "http://localhost:1337" from accessing a cross-origin frame.
at JSON.stringify ()
at stringify (http://localhost:1337/stories.ec0275ef.js:48220:15)
at PostmsgTransport.send (http://localhost:1337/stories.ec0275ef.js:48413:42)
at handler (http://localhost:1337/stories.ec0275ef.js:6815:28)
at Channel.emit (http://localhost:1337/stories.ec0275ef.js:6825:9)
at actionHandler (http://localhost:1337/stories.ec0275ef.js:50131:13)
at HTMLUnknownElement.callCallback (http://localhost:1337/stories.ec0275ef.js:19019:18)
at Object.invokeGuardedCallbackDev (http://localhost:1337/stories.ec0275ef.js:19068:20)
at invokeGuardedCallback (http://localhost:1337/stories.ec0275ef.js:19121:35)
at invokeGuardedCallbackAndCatchFirstError
Alright so, I was able to reproduce the issue with your repo (thank you).
Though I have no idea why it fails it seems to be related to the initial render of the component having a onClick even that comes directly from the return function of an action addon.
The reason why I say this, is because I was able to find a "temporary-fix" where I just used a anonymous function that calls the action
storiesOf("Button", module).add("Button w/action", () => (
<button
onClick={() => {
console.log("oh hello");
action("onCheckinLinkClicked")(1,2,3);
}}
>
Engage
</button>
));
P.S. Your repo is using "@storybook/react": "5.3.0-alpha.36", which is different than the version you mentionned in the github Issue. Just an FYI.
@shilman any ideas why an initial react render using an onClick event that comes from the return value of the action addon would cause that kind of errors ?
No idea. Forwarding to @ndelangen
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!
@ryascl thanks for reproduction, I was also interested in the topic (to get rid of webpack but to use storybook) and it led me to this solution / workaround https://github.com/vasileermicioi/parcel-storybook