Crash: `undefined is not an object (evaluating '_this.props.updateCellsBatchingPeriod')` when using @babel/proposal-decorators

[jeremyeaton89]

Describe the bug Once i provision Storybook into a brand new React Native app (via react native cli, not expo), add @babel/plugin-proposal-decorators to dev dependencies, and provision the plugin in babel.config.js, app builds but crashes on launch (see screenshot).

To Reproduce Steps to reproduce the behavior:

1. npx react-native init StorybookIssue && cd StorybookIssue
2. npx -p @storybook/cli sb init --type react_native
3. add export {default} from './storybook'; to App.js; comment/remove export default App;
4. yarn add -D @babel/plugin-proposal-decorators
5. cd ios && pod install && cd ..
6. open ios/StorybookIssue.xcworkspace/
7. Run app on xcode
8. see crash

Expected behavior See Storybook Demo preview ("Hello Button"). Happy to provide a repo to repro the issue, but i figured repro steps were simple enough.

Screenshots

Code snippets

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [['@babel/proposal-decorators', {decoratorsBeforeExport: true}]],
};

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 86.0.4240.193
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^5.3 => 5.3.21 
    @storybook/addon-knobs: ^5.3 => 5.3.21 
    @storybook/addon-links: ^5.3 => 5.3.21 
    @storybook/addon-ondevice-actions: ^5.3.23 => 5.3.23 
    @storybook/addon-ondevice-knobs: ^5.3.23 => 5.3.23 
    @storybook/react-native: ^5.3.23 => 5.3.23 
    @storybook/react-native-server: ^5.3.23 => 5.3.23 

Additional context There's no issue using legacy: true option for plugin, but unfortunately the app i'm adding storybook to uses decoratorsBeforeExport: true option. The repro steps are for a brand new app (for testing). Existing app works fine with this babel plugin.

[dannyhw]

@jeremyeaton89 hey, thanks for reporting this issue. I'm not really sure where to start with this one, any idea what is needed to support these decorators?

Also does it make sense to support something that is only in a proposal stage?

[jeremyeaton89]

@dannyhw unfortunately i don't have any great ideas for where to start except to look at updateCellsBatchingPeriod and go from there. Fortunately, I am no longer blocked by this issue as we are no longer using the decorator syntax. I suppose you're free to close this issue unless this is affecting anyone else. Thanks for your responsiveness :)

[dannyhw]

@jeremyeaton89 ok no problem :) I'll leave it here for now and if we get no activity for a while then I'll close it 👍

[badkos]

Have the same issue. How can I solve it (without disabling decorators)?

[dannyhw]

@badkos hey, like I said I don't really know anything about these decorators so if anyone can provide more information about why this might not be working that would help a lot. Otherwise I will need to just blindly debug this without knowing where to start. I appreciate that this might be frustrating but I'll try to debug this at some point when I have time and hopefully I can find out something.

If anyone is able to offer their time to help on this issue that would be greatly appreciated, the contributing docs should help you get started :).

[elsurudo]

@dannyhw did you ever figure this out?

[dannyhw]

@elsurudo sorry I haven't had time, I should be able to have a look this week maybe. I still don't really know much about this proposal but I'll give it a go.

[dannyhw]

Looking at the error it looks like an issue with a flatlist or sectionlist since that's where the updatebatchcell prop is used

[WookieFPV]

I had the same issue, but the cause was another babel plugin: @babel/plugin-proposal-class-properties

Removing it fixed this issue for me

[elsurudo]

Thanks @WookieFPV. Ended up using the same fix, but unfortunately not having this plugin makes MobX a bit more annoying to use.

[dannyhw]

Hey sorry for not updating with anything but it's been hard to make time for this issue among other things. Really it would help a lot if someone could point to something specific in this repo that is the cause of this so that I know where to look.

[murat-mehmet]

I am having a similar issue while trying to add storybook to an existing project which uses decorators with inversifyjs and typescript. Here is babel.config.js

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
  ],
  plugins: [
    'babel-plugin-transform-typescript-metadata',
    ["@babel/plugin-proposal-decorators", {legacy: true}],
    'react-native-reanimated/plugin'
  ]
};

I think storybook is not working with inversify at all.

[dannyhw]

@murat-mehmet Can you explain what inversify is, also what version of storybook you are using. This issue was created for 5.3 and 6.5 is now the stable version and has had many changes.

Also if you want help sharing an reproduction is the most effective way.

[murat-mehmet]

InversifyJS is a dependency injection tool which is heavily used with legacy decorators.

I used the latest docs to add sb to my existing project: npx sb@latest init --type react_native Here are used versions:

...
    "inversify": "^6.0.1",
    "inversify-inject-decorators": "^3.1.0",
    "inversify-react": "^1.1.0",
    "react-native": "0.71.8",
    "@storybook/react-native": "^6.5.3",
...

I will try to create a simple project for reproduction as soon as I can

[murat-mehmet]

@dannyhw Aw.. I solved my issue while trying to create a project for reproduction. So I was following the suggested blog post to create multiple entry points for sb and main app. I was missing import "reflect-metadata"; in the new entry point which was crucial for inversify to work. It is working now without issue. Thanks for the quick response!