storybook: error: 'Plugin 0 provided an invalid property of "default"' when using with React Native + TypeScript

also bumping these dependencies seems to have fixed it for me:

"@babel/core": "^7.0.0-beta",
"babel-core": "^7.0.0-beta",
"babel-runtime": "^7.0.0-beta",

Replace your package.json to exactly code bellow:

{ "name": "reactunitytest", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "16.4.1", "react-native": "0.55.0", "react-native-unity-view": "^1.1.2" }, "devDependencies": { "babel-jest": "23.4.0", "babel-preset-react-native": "2.1.0", "jest": "23.4.1", "react-test-renderer": "16.4.1" }, "jest": { "preset": "react-native" } }

Restart your Metro bundle service and to be happy!

I was seeing this too on a new React Native (0.56) app, without TypeScript.

As mentioned elsewhere, the issue stems from the fact that RN 0.56 uses babel core v7, whereas the getstorybook command installs babel core v6. To solve, this is what I did:

yarn remove babel-core
yarn add -D @babel/core@7.0.0-beta.47 babel-core@7.0.0-bridge.0

This ensures that storybook uses the same version of babel core that RN is using to compile the app. The babel-core bridge package is necessary so that storybook ‘sees’ babel core v7 properly (see here for more details).

For those still running into this issue, here are the steps i followed to get updated:

1. change the version number for “babel-preset-react-native” in package.json to: "babel-preset-react-native": "^4.0.1"
2. I am using yarn so run yarn install
3. Run react-native-git-upgrade
4. Fix any conflicts; I had one
5. Remove babel-preset-react-native: yarn remove babel-preset-react-native
6. Install metro-react-native-babel-preset yarn add -D metro-react-native-babel-preset
7. Most importantly clear your cache, I have a npm script for this one: "clear-cache": "watchman watch-del-all && rm -rf node_modules/ && yarn install && react-native start --reset-cache"

That should do it! Let me know if this helps!

Downgrading to ^4.0.1 did the trick to me

the same error exist even without typescript

Just i changed “babel-preset-react-native”: “4.0.0” version and this issue is fixed.

Hey Guys I manage to get it working RN v0.57 and storybook,

• I started a project from scratch using react-native init
• I had an issue regarding @babel/runtime so I installed(IDK if this will happen to you as well)
• I installed storybook as usual with getstorybook
• At that point I remember I was seeing a warning on the storybook builder, I delete node_modules and ran npm start -- --reset-cacheproblem solved,
• With this I got rid of the errors but when I started storybook yarn run storybook I wasn’t able to see the stories.
• I realized that in my package.json I still had babel v6 dependencies, so I use this tool: https://github.com/babel/babel-upgrade, here are the dependencies of the working project:

 "dependencies": {
    "@babel/runtime": "^7.1.2",
    "react": "16.5.0",
    "react-native": "0.57.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@storybook/addon-actions": "^4.0.0-alpha.21",
    "@storybook/addon-links": "^4.0.0-alpha.21",
    "@storybook/addons": "^4.0.0-alpha.21",
    "@storybook/react-native": "^4.0.0-alpha.21",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.47.0",
    "prop-types": "^15.6.2",
    "react-dom": "16.5.0",
    "react-test-renderer": "16.5.0",
    "@babel/preset-flow": "^7.0.0"
  }

• Even with this I wasn’t able to see it working, so I come back to this guide: https://github.com/storybooks/storybook/tree/master/app/react-native and I realized I didn’t use something like this:

import StorybookUI from './storybook';

import App from './app';

module.exports = __DEV__ ? StorybookUI : App;

So I modify my index.js to something like this:

import StorybookUI from './storybook';
import App from './src/App';
import {name as appName} from './app.json';

const AppComponent = __DEV__ ? StorybookUI : App;

AppRegistry.registerComponent(appName, () => AppComponent);

With all this steps I was able to meke it run, I hope it helps

@raynor85 I just followed the directions in https://github.com/storybooks/storybook/issues/3897#issuecomment-421186803 except for the watchman watch-del-all part because I don’t have watchman. The key I think was downgrading to "babel-preset-react-native": "^4.0.1" before I ran react-native-git-upgrade. I had tried a million times upgrading to 0.57 before that and that was the only thing that I changed. Then it worked.

@ivansnek it seems like we have the same issue. Storybook watcher is working but it is simply not connected to the simulator. I have also tried to create a fresh react-native project (version 0.57), but no luck.

Yep I also tried the same and 👎

@ivansnek it seems like we have the same issue. Storybook watcher is working but it is simply not connected to the simulator. I have also tried to create a fresh react-native project (version 0.57), but no luck.

@andycloke I am still stuck with the same issue with React Native (0.56) and typeScript, can you please help me out here is my config

devDependencies - "@babel/core": "7.0.0-beta.47", "@storybook/addon-actions": "4.0.0-alpha.2", "@storybook/addon-links": "4.0.0-alpha.2", "@storybook/addon-storyshots": "4.0.0-alpha.2", "@storybook/addons": "4.0.0-alpha.2", "@storybook/react-native": "4.0.0-alpha.2", "babel-core": "7.0.0-bridge.0", "babel-preset-react-native": "^5", "babel-runtime": "^7.0.0-beta",

.babelrc { "presets": [ "react-native" ] }

Have tried the solution suggested by @fiznool, still haven’t got it working.

@hersonrodrigues thank you, your code ended my 2-days struggling about starting react native normally

i have the same issue, in a new project with the same setup as @andycloke. @jimmytb’s solution does not fix the error for me