Unable to run on React-Native app v47.1

[tabrindle]

Steps

npm i -g @storybook/cli (3.2.5)
react-native init teststorybook
cd teststorybook/
getstorybook
yarn run storybook

Output:

tabrindle-mbp:teststorybook tabrindle$ yarn run storybook 
yarn run v0.27.5
$ storybook start -p 7007
=> Loading custom .babelrc from project directory.
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
=> Loading custom webpack config (full-control mode).
Scanning 878 folders for symlinks in /Users/tabrindle/Developer/teststorybook/node_modules (5ms)

React Native Storybook started on => http://localhost:7007/

Scanning 879 folders for symlinks in /Users/tabrindle/Developer/teststorybook/node_modules (7ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/tabrindle/Developer/teststorybook/storybook
   /Users/tabrindle/Developer/teststorybook
   /Users/tabrindle/Developer/teststorybook 


React packager ready.

Loading dependency graph, done.
webpack built d804d54d9d26905fb832 in 3635ms
Hash: d804d54d9d26905fb832
Version: webpack 3.5.5
Time: 3635ms
                   Asset     Size  Chunks                    Chunk Names
static/manager.bundle.js  5.97 MB       0  [emitted]  [big]  manager
   [0] ./node_modules/react/index.js 190 bytes {0} [built]
   [7] ./node_modules/babel-runtime/helpers/inherits.js 1.11 kB {0} [built]
  [27] ./node_modules/global/window.js 232 bytes {0} [built]
 [103] ./node_modules/@storybook/ui/dist/index.js 2.41 kB {0} [built]
 [186] multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js 40 bytes {0} [built]
 [187] ./storybook/addons.js 701 bytes {0} [built] [failed] [1 error]
 [188] ./node_modules/@storybook/react-native/dist/manager/index.js 495 bytes {0} [built]
 [248] ./node_modules/@storybook/ui/dist/modules/shortcuts/index.js 509 bytes {0} [built]
 [253] ./node_modules/@storybook/ui/dist/modules/api/index.js 821 bytes {0} [built]
 [256] ./node_modules/@storybook/ui/dist/modules/ui/index.js 1.01 kB {0} [built]
 [474] ./node_modules/@storybook/react-native/dist/manager/provider.js 3.86 kB {0} [built]
 [475] ./node_modules/@storybook/channel-websocket/dist/index.js 2.82 kB {0} [built]
 [477] ./node_modules/@storybook/addons/dist/index.js 2.39 kB {0} [built]
 [478] ./node_modules/uuid/index.js 120 bytes {0} [built]
 [481] ./node_modules/@storybook/react-native/dist/manager/components/PreviewHelp.js 2.92 kB {0} [built]
    + 467 hidden modules

ERROR in ./storybook/addons.js
Module build failed: /Users/tabrindle/Developer/teststorybook/node_modules/babel-preset-react-native/configs/main.js:41
  );
  ^
SyntaxError: Unexpected token )
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/tabrindle/Developer/teststorybook/node_modules/babel-preset-react-native/index.js:11:18)
 @ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js
^Z
[1]+  Stopped                 yarn run storybook

Environment:

OS: macOS Sierra 10.12.5
Node: 7.10.0
Yarn: 0.27.5
npm: 4.6.1
Watchman: 4.7.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 2.3 AI-162.4069837
react-native-cli: 2.0.1

Packages: (wanted => installed)
babel-jest: 20.0.3 => 20.0.3
babel-preset-react-native: 3.0.0 => 3.0.0
jest: 20.0.4 => 20.0.4
react-test-renderer: 16.0.0-alpha.12 => 16.0.0-alpha.12
@storybook/react-native: ^3.2.5 => 3.2.5
react-dom: 16.0.0-alpha.12 => 16.0.0-alpha.12
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: 0.47.1 => 0.47.1

[shilman]

Reproduced on my machine. It seems to be an issue with RN 0.47.1. I tried it on an older RN 0.45.1 project and it worked no problem. Will dig in and see what I can deduce, thanks for reporting!

[shilman]

Update: I got it working by downgrading babel-preset-react-native from 3.0.0 to 1.9.2. I'm not sure what's wrong with Storybook or with babel-preset-react-native, but as a temporary workaround, if you downgrade the babel preset it should work for you. I did not take the time to figure out at what version specifically it broke (1.9.2 was the version used by my other test project that was working).

[tabrindle]

Awesome! Thanks so much for looking into this. Now that I know where to look, I can help dig into this as well. Had some issues with that babel preset the other day.

[tabrindle]

Confirmed that both the server and app actually start now.

After having looked at the changelog for babel-preset-react-native, the only things Ive seen that might mess things up is adding dynamic imports, and change how regenerator-runtime is included.

Here's what I looked at.

https://github.com/facebook/react-native/commits/master/babel-preset/package.json

[shilman]

@tabrindle I just released @storybook/react-native@3.2.6-alpha.0 that fixes this problem. I don't know WHY it fixes the problem, but I do know that we messed with the babel settings so I decided to give it a shot.

Can you try it on your project? Once we've confirmed its stable (it contains a bunch of changes) we'll release 3.2.6.

[tabrindle]

As a programmer, that is the worst place to be in. ¯\(ツ)/¯

But, on the bright side, confirmed working:

npm i -g @storybook/react-native@3.2.6-alpha.0
react-native init teststorybook
cd teststorybook/
getstorybook
yarn run storybook

Closing this issue!