`@storybook/addon-actions` & `@storybook/addon-ondevice-actions` are not working

[alechp]

I'm using @storybook/react-native and @storybook/react-native-server and having the same issue (or at least same error message) as described here: https://github.com/storybooks/storybook/issues/6471#issue-431269970 (ie. synthetic event is used for performance reasons error)

Summary

• @storybook/react-native: No addons are shown on the device (under the addons tab on iOS Simulator)
• @storybook/react-native-server: Unlike @storybook/react-native, the addons tab displays as expected. However, when clicking a button with an action() handler on it (eg.<Button onPress={action("clicked-text")}>), a "synthetic event handler" error is thrown recursively.

Source (storybook/stories/index.js)

storiesOf("Button", module)
  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
  .add("with text", () => (
    <Button onPress={action("clicked-text")}>
      <Text>Hello Button</Text>
    </Button>
  ))

Error

The error below recurses

Screenshot

Text

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're %s `%s` on a released/nullified synthetic event. %s. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information., accessing the property, target, This is set to null
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:619:8 in warningWithoutStack
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1577:10 in warn
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1569:9 in get$$1
* [native code]:null in stringify
- node_modules/@storybook/react-native/node_modules/@storybook/channel-websocket/dist/index.js:67:46 in sendNow
- node_modules/@storybook/react-native/node_modules/@storybook/channel-websocket/dist/index.js:56:21 in send
- node_modules/@storybook/channels/dist/index.js:126:32 in handler
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:152:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:200:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:464:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:320:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in <unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:17 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Screenshots

Chrome (@storybook/react-native-server)

iOS Simulator (@storybook/react-native)

Config

package.json

Also, if you're wondering why I'm using @storybook/[email protected] instead of @storybook/[email protected] please see this issue: https://github.com/storybooks/storybook/issues/6769

  "scripts": {
    "android": "expo start --android",
    "build": "yarn run build:components",
    "build:components": "webpack --config ./webpack.components.js",
    "eject": "expo eject",
    "expo": "expo start",
    "ios": "expo start --ios",
    "start": "npm-run-all --parallel expo storybook",
    "storybook": "start-storybook -p 7007"
  },
  "dependencies": {
    "@emotion/native": "^10.0.11",
    "expo": "^32.0.0",
    "native-base": "^2.12.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-router": "^5.0.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "@emotion/core": "^10.0.10",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addon-storysource": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react-native": "^5.0.11",
    "@storybook/react-native-server": "5.1.0-alpha.7",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-expo": "^5.0.0",
    "babel-runtime": "^6.26.0",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "emotion-theming": "^10.0.10",
    "npm-run-all": "^4.1.5",
    "prop-types": "^15.7.2",
    "react-dom": "16.5.0",
    "size-plugin": "^1.2.0",
    "storybook-react-router": "^1.0.5",
    "webpack-cli": "^3.3.2",
    "webpack-node-externals": "^1.7.2"
  },

Addon files

addons.js

import "@storybook/addon-actions/register";
import "@storybook/addon-links/register";
import "@storybook/addon-storysource/register";

rn-addons.js

import "@storybook/addon-ondevice-actions/register";
import "@storybook/addon-ondevice-links/register";
import "@storybook/addon-ondevice-storysource/register";

Quick Fix

Haven't found a quick fix yet (besides not using @storybook/addon-actions / @storybook/addon-ondevice-actions).

I'm going to try upgrading react-dom like suggested here: https://github.com/storybooks/storybook/issues/6471#issue-431269970

I'll update if that progresses the "synthetic event" error.

[alechp]

Not sure whether this is related or not, but storysource also fails to load. I recall that in a past version storysource was working fine. Unfortunately, didn't document which version it was working on (although I have a strong suspicion it was @storybook/[email protected])

@storybook/addon-ondevice-storysource & @storybook/addon-storysource both fail

Note: the config for this is identical to the config above

[alechp]

Update: This issue persists in 5.1.0-rc.4

Screenshots

Story source loads indefinitely

Story actions throws synthetic event issue

---

Deps

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "npm-run-all --parallel expo storybook",
    "expo": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "storybook": "start-storybook -p 7007"
  },
  "dependencies": {
    "@emotion/native": "^10.0.11",
    "expo": "^32.0.0",
    "native-base": "^2.12.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-router": "^5.0.0"
  },
  "devDependencies": {
    "@emotion/core": "^10.0.10",
    "@storybook/addon-actions": "^5.1.0-rc.4",
    "@storybook/addon-links": "^5.1.0-rc.4",
    "@storybook/addon-storysource": "^5.1.0-rc.4",
    "@storybook/addons": "^5.0.11",
    "@storybook/react-native": "^5.1.0-rc.4",
    "@storybook/react-native-server": "5.1.0-rc.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-expo": "^5.0.0",
    "babel-runtime": "^6.26.0",
    "emotion-theming": "^10.0.10",
    "npm-run-all": "^4.1.5",
    "prop-types": "^15.7.2",
    "react-dom": "16.5.0",
    "storybook-react-router": "^1.0.5"
  },
  "private": true
}

[stale[bot]]

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!

[alechp]

Update: unable to test in 5.1.9 because of https://github.com/storybookjs/storybook/issues/7017#issuecomment-506420659

[Gongreg]

Hey, @alechp. Regarding story selection issues there is this issue: storybookjs/storybook#4716 .

Regarding storysource addons there is no @storybook/addon-ondevice-storysource addon. Also @storybook/addon-storysource doesn't work in React Native since it uses webpack to do its magic.

Regarding @storybook/addon-actions there seems to be a bug. @shilman I am not sure we need to separate issues when the bug seems to be the same on.

Also sorry for not replying for so long, didn't see this issue.

[alechp]

Re: storysource - thanks for the heads up

Re: response time - all good. Thanks for taking the time to check it out!

Re: actions - is this bug separate from storybookjs/storybook#4716 ?

[Gongreg]

@alechp, regarding actions I think it is a separate issue. Didnt have time to check it. But I think the bug is inside actions addon itself.

[ocano12]

Hi im getting the same warning any updates on this?

[Gongreg]

No, sorry.

[stale[bot]]

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!

[stale[bot]]

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!

[FRizzonelli]

I think this is still an active issue (at least on latest version). Can we reopen it?

[cloud-walker]

Hi, its working for me, I've installed both addon-ondevice-actions and actions but I've registered only addon-ondevice-actions, but I import addon-actions in the stories!

[dbudziwojski]

I'm still seeing this issue, action("clicked-text") continues to not cause the action logger to appear, whilst the Addons tab continued to show "No adding loaded". Warning appears as per original documentation. I've attempted the import of addon-ondevice-actionsto no avail.

[dannyhw]

does anyone still have this issue? if so it would be good if it could be reproduced in a branch using the example app. Try the reproduction steps in the contributing doc or make an expo snack based on the one in the readme.

[WarrenBuffering]

Thank you @cloud-walker. I've been trying to figure this one out for too long now. Honestly I'm really just struggling to find good docs for Storybook's setup pertaining to RN. There's what looks like an official tutorial, but they contradict the setup instructions on the actual package. Does anyone know what setup instructions are up to date? If you do could you share the link?

[dannyhw]

@WarrenBuffering currently I'm working with the tutorial maintainer to improve it but honestly the tutorial doesn't work for me and that's why I've given my own version of the getting starting guide here on the repo (still a work in progress).

There is also an issue with the cli init command for react native, I've already fixed in the alpha version (@next) so hopefully that will get released soon. It will get released with 6.1 of storybook since the cli is linked with the main storybook repo.

[dannyhw]

also in regards to this specific issue it's related to storybook server and I'm thinking it's probably fixed in v6 of storybook so when I'm able to make a v6 for react native that would hopefully resolve this issue. If I can find the root cause I will try to get a patch for 5.3 though.

Just a side note: From my experience this error doesn't actually cause anything to fail it's just a nuisance. In fact you can see that it's a warning not a full on error.

[mashaalmemon]

I just started using storybook and noticed us react-native folks are still on 5.3 whereas the rest of the storybook ecosystem is on 6.3!

For anyone still experiencing this error on 5.3 with react native, looking at the error experienced closer it says:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method isPropagationStopped on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.

Using @alechp 's example which is from the storybook react-native 'Hello World':

storiesOf("Button", module)
  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
  .add("with text", () => (
    <Button onPress={action("clicked-text")}>
      <Text>Hello Button</Text>
    </Button>
  ))

To get rid of the nuisance error we can just replace

onPress={action("clicked-text")}

with

onPress={(e)=>{ e.persist(); action('clicked-text')(e)}}

Ultimately we're just calling event.persist() before calling the handler generated by action. Once this is done, e everything else seems to work the same (that is the action feeds through to the react-native-server), without the nuisance error!

[rusakovic]

@mashaalmemon Great. Thank you. This bug is still not solved.

For google search:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `StoryView`.

[traviswimer]

I ran into this error while using the default React Native stories.

This probably isn't exactly the same problem that this issue is discussing, but I want to mention it in case it helps.

For me the problem was that when these default stories import their index.js file, they do so like this:

import Welcome from '.';

This results in an error, but I was able to prevent the error by actually including the index file name in the import:

import Welcome from './index';

I'm not sure if this is just a result of my specific environment or if it is a bug in the Storybook default examples. I am using Typescript, so maybe that is part of the problem. (isn't it always 😏)

[aike19115]

@traviswimer Thanks for your answer, it solved the problem I was facing! (Expo project with TypeScript)

[fontesrp]

@traviswimer you're my hero

[dannyhw]

this seems like an old issue so I'm closing as part of a cleanup, let me know if it needs to be reopened.