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

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 Screen Shot 2020-11-09 at 12 19 50 PM

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.

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Comments: 15 (7 by maintainers)

Most upvoted comments

@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!

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

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

Removing it fixed this issue for me

@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 😃.

@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 👍