react-native Using addon-ondevice-notes crashes app on startup.

Using addon-ondevice-notes crashes app on startup.

Open behealy opened this issue 4 years ago • 5 comments

Describe the bug Using the addon-ondevice-notes addon breaks storybook on the device. The following error is seen immediately on startup (or refresh of the simulator as the case may be):

Screen Shot 2020-04-22 at 3 35 24 PM

In addition to the message about story being null when trying to evaluate story.parameters, I've noticed that selection in this case is an empty object, with no storyId. https://github.com/storybookjs/storybook/blob/master/addons/ondevice-notes/src/components/Notes.tsx#L27

To Reproduce Steps to reproduce the behavior:

Followed "Installation" and "Configuration" steps here: https://github.com/storybookjs/storybook/tree/v5.3.13/addons/ondevice-notes
Added notes parameter to some BUT NOT ALL component stories. E.g.:

storiesOf('CheckBox', module)
    .addDecorator(getStory => <Container>{getStory()}</Container>)
    .addParameters({ notes: 'This component is currently unused in-app.' })
    .add('Unselected', () => <CheckBoxField label="Reticulate splines" />)
    .add('Selected', () => <CheckBoxField label="Reticulate splines" active />);

storiesOf('UserFollowRow', module)
    .addDecorator(getStory => <Container>{getStory()}</Container>)
    .add('is following', () => <UserFollowRow user={MOCK_USER} isFollowing />)
    .add('is not following', () => (
        <UserFollowRow user={MOCK_USER} isFollowing={false} />
    ))

Start storybook react-native-server.
Run metro bundler using react-native start --reset-cache.
Run app on iOS simulator using react-native run-ios.
See error.

Expected behavior Notes show up in addons for components that have notes parameters set on their stories, and no error shows up preventing storybook from being used.

System: Environment Info:

System: OS: macOS 10.15.2 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Binaries: Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node Yarn: 1.21.1 - ~/.nvm/versions/node/v10.16.3/bin/yarn npm: 6.13.6 - ~/.nvm/versions/node/v10.16.3/bin/npm Browsers: Chrome: 81.0.4044.113 Firefox: 74.0.1 Safari: 13.0.4 npmPackages: @storybook/addon-actions: 5.3.13 => 5.3.13 @storybook/addon-links: 5.3.13 => 5.3.13 @storybook/addon-notes: 5.3.13 => 5.3.13 @storybook/addon-ondevice-notes: ^5.3.18 => 5.3.18 @storybook/addons: 5.3.13 => 5.3.13 @storybook/node-logger: 5.3.13 => 5.3.13 @storybook/react-native: 5.3.13 => 5.3.13 @storybook/react-native-server: ^5.3.11 => 5.3.18

Additional context Within my package.json:

"dependencies": {
  ...
  "react": "16.12.0",
  "react-native": "0.61.5",
  ...
},
"devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-flow": "^7.0.0",
    "@babel/runtime": "^7.8.4",
    "@babel/runtime-corejs2": "^7.8.4",
    "@storybook/addon-actions": "5.3.13",
    "@storybook/addon-links": "5.3.13",
    "@storybook/addon-notes": "5.3.13",
    "@storybook/addon-ondevice-notes": "^5.3.18",
    "@storybook/addons": "5.3.13",
    "@storybook/node-logger": "5.3.13",
    "@storybook/react-native": "5.3.13",
    "@storybook/react-native-server": "^5.3.11",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "25.1.0",
    "babel-plugin-module-resolver": "4.0.0",
    "babel-runtime": "^6.26.0",
    "eslint": "^6.7.2",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-import-resolver-babel-module": "5.1.2",
    "eslint-plugin-flowtype": "^4.5.2",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jest": "23.8.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-prettier": "3.1.2",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "2.5.1",
    "flow-bin": "0.115.0",
    "flow-typed": "2.6.2",
    "jest": "^25.1.0",
    "jest-junit": "^10.0.0",
    "lint-staged": "10.0.8",
    "lodash-cli": "4.17.5",
    "metro-react-native-babel-preset": "^0.58.0",
    "prettier": "2.0.3",
    "react-dom": "16.12.0",
    "react-native-checkmate": "^0.2.0",
    "react-test-renderer": "^16.12.0",
    "shared-git-hooks": "1.2.1"
  }

Apr 22 '20 22:04 behealy

I was also having this problem on 5.3.19, and... I'm not good enough in JS to give a definite conclusion, but I can at least share my findings. (I made mine work in point number 2)

This only happens when I userequire instead of import in my rn-addons.js file. (But when I use import the addon won't load on the initial load in RN storybook, it will show up only after a fast refresh, same goes for ondevice-knobs and actions). *Hence, I use require for both ondevice-knobs and ondevice-actions because otherwise they won't show on the initial load, and I want to make notes work with require as well for the same reason.
I noticed that the addon will be in the same order as the order you load it in rn-addons.js when using require. I noticed that probably, the first add-on would have been mounted by the time of the initial load. I thought that if I make notes addon not first, maybe it will get around the story.parameters null issue(?). So I made it so that Notes is require/loaded into my rn-addons.js the last. Now it works!
At first glance, the problem probably occurs in https://github.com/storybookjs/storybook/blob/v5.3.19/addons/ondevice-notes/src/components/Notes.tsx#L27 . In this current case, selection in line 21 will be an empty object {} and therefore pass the boolean check in line 23. Adding a if (!selection || !Object.keys(selection).length) { would somewhat help us pass the error, but then our notes won't show on the initial addon tab opening (changing addon tabs will fix it).

I'd like to debug and check more, and perhaps contribute, but alas I'm not really sure where to go from here. The usage of StoryBook's api object in Notes component is undocumented, and my only suspect is that something went wrong with the initial setStory on react-native's storybook preview mount, but I'm not sure how I'd check that.

Misc. info: Node: 12.6.1 Yarn: 1.22