Storybook: React Native Storybook doesn't work with current CRNA

[inyono]

Thanks for this awesome tool 👍 Unfortunately, we ran into some issue while upgrading our app to Expo 20. Apparently, react-inspector causes it.

TL;DR: When using React Native Storybook within a CRNA (Expo 20), React Native packager throws TransformError during bundling:

TransformError: {appPath}/node_modules/react-inspector/lib/index.js: Couldn't find preset "es2015" relative to directory "{appPath}/node_modules/react-inspector"

Versions:

"expo": "20.1.3"
"react": "16.0.0-alpha.12"
"react-dom": "16.0.0-alpha.12"
"react-native": "0.47.2"
"react-native-scripts": "1.3.1"
"@storybook/react-native": "3.2.8"

Steps to reproduce:

1. Create a new CRNA or clone sample repo https://github.com/inyono/crna-storybook-expo20:
   
   
   
   • create-react-native-app
   
   
   • getstorybook
   
   
   • Replace App.js with export default from './storybook';
   
   
2. yarn resp. npm install
3. Start React Native packager with yarn start resp. npm start
4. Open app in Expo
5. Error in terminal: Failed building JavaScript bundle
6. Error on device / simulator:

TransformError: {appPath}/node_modules/react-inspector/lib/index.js: Couldn't find preset "es2015" relative to directory "{appPath}/node_modules/react-inspector"

[inspireui]

Fixed by: npm install --save-dev babel-preset-es2015

Then add .babelrc file to storybook folder with the es2015 in presets.

Screenshot: https://gyazo.com/2e7b0214dc9f217391b242f4b045807d

[inyono]

@inspireui Thanks, nice workaround. I modified the .babelrc in root, didn't think about creating one in storybook directory. 😅

[danielduan]

It looks like our move from babel es-2015 to env caused some unexpected packages to break.

Does someone want to submit a PR for this? a custom .babelrc is definitely not the solution if CRNA doesn't work out of the box.

[Ragnar-H]

@danielduan this has been fixed upstream

I guess updating the dependency of react-inspector will close this issue?

[danielduan]

@Ragnar-H I don't see react-inspector listed explicitly as a dependency so I'm guessing the fix would just be to delete the node_modules and reinstall?

I would consider this case closed if that's the solution.

[Hypnosphi]

@danielduan it's a dependency of @storybook/ui (see lib/ui/package.json). I'll try to update it

[Ragnar-H]

@Hypnosphi it's also in addon-actions - addons/actions/package.json

@danielduan you'd also need to clear the dependency from yarn.lock

[Hypnosphi]

Until #1888 gets released and merged, the easiest fix for current apps is following:

1. Remove all the @storybook/* dependencies
2. Run npm install or yarn install depending on which lockfile do you use. This will remove the lock for react-inspector package
3. Restore the dependencies and run install command again