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

[andycloke]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

Failing to compile when trying to use with React Native + Typescript:

yarn storybook start -p 7007 --metro-config $PWD/rn-cli.config.js

ERROR in ./storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin 0 specified in "/Users/***/node_modules/babel-preset-react-native/index.js" provided an invalid property of "default" (While processing preset: "/Users/***/node_modules/babel-preset-react-native/index.js")
    at Plugin.init (/Users/***/node_modules/babel-core/lib/transformation/plugin.js:131:13)
    at Function.normalisePlugin (/Users/***/node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
    at /Users/***/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/***/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/***/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at /Users/***/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /Users/***/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/***/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
 @ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js manager[0]

Steps to reproduce:

1. Create a new react-native app: react-native init test --template typescript
2. Setup typescript support : cd test && node setup.js
3. getstorybook
4. replace storybook command with storybook start -p 7007 --metro-config $PWD/rn-cli.config.js
5. Run yarn storybook

Please specify which version of Storybook and optionally any affected addons that you're running

 "@storybook/react-native": "4.0.0-alpha.2",
 "@storybook/addon-actions": "4.0.0-alpha.2",
 "@storybook/addon-links": "4.0.0-alpha.2",
 "@storybook/addons": "4.0.0-alpha.2"

Screenshots / Screencast / Code Snippets (Optional)

.babelrc:

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

.tsconfig:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "react",
    "lib": ["es6"],
    "module": "es6",
    "moduleResolution": "node",
    "noEmit": true,
    "noImplicitAny": true,
    "target": "es2015"
  },
  "exclude": ["node_modules"]
}

[alimek]

the same error exist even without typescript

[jimmytb]

I had the same problem. I had to add a custom .babelrc in my .storybook folder with the following code:

{
  "presets": ["env", "stage-0", "react-native"]
}

[swese44]

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

[swese44]

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",

[andycloke]

That works for me too @swese44. Nice one!

[ashutosh-akss]

Same issue with me , I am runnig npm test, and getting same error

[Navin77]

same issue for me. i also changed presets as @jimmytb's solutions and also installed additional dependencies as said by @swese44.
On running npm test, it shows another error now :
Plugin/Preset files are not allowed to export objects, only functions. In /home/navin/dev/react-native/too/node_modules/babel-preset-stage-0/lib/index.js

[anchetaWern]

Also have the same issue.
What I did was to use create-react-native-app to initialize a new RN project. After that, I installed all the storybook stuff (via getStorybook). Lastly, I ejected the app using npm run eject. Note that create-react-native-app uses RN version 0.55.2.

[prathamudeshmukh]

Is this issue solved for anyone? The only difference in my case is, Im using plain JS and not TS.

[vaibhavk98]

I am having the same issue, I tried these solutions (as [email protected] was unstable, so I downgraded to 0.44.0). But it didn't solved my issue.

[fiznool]

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/[email protected] [email protected]

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).

[hersonrodrigues]

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!

[meidikawardana]

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

[MJ0826]

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

[goncalvesej]

I've updated the babel-preset-react-native to 5.0.2 according to 0.57-RC documentation, and it worked.

[igor-dv]

Looks like the issue is unrelated to typescript, but to some kind of combination between RN, babel, and Storybook.

[devmetal]

@igor-dv I agree, i wanted try to use with a simple rn project. I just created one with react-native init. The rn itself is working i tried with ios, and the bundler working. After i just added the storybook with the cli, and i just started and i get the same error.

[ivansnek]

Downgrading to ^4.0.1 did the trick to me

[raynor85]

The solution no longer work with "react-native": "^0.57.0"

[damianthekreeeytor]

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!

[raynor85]

Specifically for React Native 0.57
Broken with [email protected] due to packager (local-cli) API change

[raynor85]

@damianthekreeeytor I have tried your approach but it doesn't work. It is worth to mention I am using Typescript, and I don't get any errors when I start storybook. The main difference I get compared to when I was using React 0.56 is that the storybook packager doesn't connect to the simulator, and I have also noticed that I can run simultaneously metro bundler with the storybook web socket.
That is my .babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "babel-plugin-root-import",
      {
        "paths": [
          {
            "rootPathPrefix": "~",
            "rootPathSuffix": "src"
          }
        ]
      }
    ]
  ],
  "env": {
    "production": {
      "plugins": [
        [
          "babel-plugin-root-import",
          {
            "rootPathPrefix": "~",
            "rootPathSuffix": "src"
          }
        ]
      ]
    }
  }
}

And this is my package.json

{
  "name": "MyApp",
  "version": "0.0.9",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "lint": "tslint -p . -c tslint.json",
    "fix": "tslint -p . -c tslint.json --fix",
    "ios": "react-native run-ios",
    "ios-staging": "ENVFILE=.env.staging react-native run-ios",
    "android": "react-native run-android",
    "android-staging": "ENVFILE=.env.staging react-native run-android",
    "storybook": "storybook start -p 7007 --metro-config $PWD/rn-cli.config.js",
    "bump": "yarn run bump-ios || yarn run bump-android",
    "bump-ios": "(cd ios && fastlane bump)",
    "bump-android": "(cd android && fastlane bump)",
    "build": "yarn run build-ios || yarn run build-android",
    "build-ios": "(cd ios && fastlane build)",
    "build-android": "(cd android && fastlane build)"
  },
  "husky": {
    "hooks": {
      "pre-push": "yarn run lint && yarn test"
    }
  },
  "dependencies": {
    "aws-amplify": "^1.0.2",
    "bad-words": "^1.6.1",
    "countries-list": "^2.3.2",
    "flux-standard-action": "^2.0.3",
    "moment": "^2.22.2",
    "query-string": "^6.1.0",
    "react": "16.5.0",
    "react-native": "0.57.0",
    "react-native-config": "luggit/react-native-config#pull/270/head",
    "react-native-iphone-x-helper": "^1.0.3",
    "react-native-modal": "^6.4.0",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-picker-select": "andycloke/react-native-picker-select",
    "react-native-scrollable-tab-view": "happypancake/react-native-scrollable-tab-view#45a0d58effe9c34bda13e18745b50575ea61d2b3",
    "react-native-snap-carousel": "^3.7.2",
    "react-native-swiper-flatlist": "^1.0.7",
    "react-native-video": "^3.2.0",
    "react-navigation": "^2.10.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-api-middleware": "^2.3.0",
    "redux-form": "^7.4.2",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^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",
    "@types/jest": "23.1.6",
    "@types/query-string": "^6.1.0",
    "@types/react": "16.4.6",
    "@types/react-native": "0.56.1",
    "@types/react-native-modal": "^4.1.1",
    "@types/react-native-scrollable-tab-view": "^0.8.2",
    "@types/react-native-snap-carousel": "^3.6.4",
    "@types/react-native-video": "^2.0.6",
    "@types/react-navigation": "^2.0.15",
    "@types/react-redux": "^6.0.4",
    "@types/react-test-renderer": "16.0.1",
    "@types/redux": "^3.6.0",
    "@types/redux-form": "^7.4.3",
    "@types/storybook__react": "^3.0.8",
    "@types/storybook__react-native": "^3.0.0",
    "@types/uuid": "^3.4.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-plugin-root-import": "^6.1.0",
    "babel-runtime": "7.0.0-beta.3",
    "husky": "^1.0.0-rc.13",
    "jest": "23.4.1",
    "metro-react-native-babel-preset": "^0.45.2",
    "prop-types": "^15.6.2",
    "react-dom": "16.4.1",
    "react-native-typescript-transformer": "1.2.10",
    "react-test-renderer": "16.4.1",
    "reactotron-react-native": "^2.0.0",
    "reactotron-redux": "^2.0.0",
    "redux-devtools-extension": "^2.13.5",
    "ts-jest": "23.0.0",
    "tslint": "^5.10.0",
    "tslint-config-prettier": "^1.13.0",
    "tslint-react": "^3.6.0",
    "typescript": "2.9.2",
    "uuid": "^3.3.2"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.tsx?$": "ts-jest",
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "modulePaths": [
      "<rootDir>"
    ]
  },
  "rnpm": {
    "assets": [
      "src/assets/fonts"
    ]
  }
}

[ivansnek]

@damianthekreeeytor I follow you steps, I was still facing some issues, then mannually changed the storybook babel dependencies that got installed. I'm now get rid of the error but the storybook is not working, I mean I cannot see any updates on the stories, like if the storybook server wasn't taking any chanes.

Current setup version(As you can see very basic setup, just to get storybook running):

  "dependencies": {
    "react": "16.5.0",
     "react-native": "0.57.0",
     "react-native-config": "^0.11.5"
  },
  "devDependencies": {
    "@babel/core": "^7.0.1",
    "@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-0",
    "babel-jest": "^23.6.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "jest": "23.5.0",
    "metro-react-native-babel-preset": "^0.45.2",
    "prop-types": "^15.6.2",
    "react-dom": "16.4.1",
    "react-test-renderer": "16.4.1",
    "reactotron-react-native": "^2.1.0"
  },
  "jest": {
    "transform": {
      "^.+\\.js$": "<RELATIVE_PATH>/preprocessor.js"
    }
  }

[raynor85]

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

[ivansnek]

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

[mcmar]

@damianthekreeeytor You are a god amongst men. https://github.com/storybooks/storybook/issues/3897#issuecomment-421186803 saved my butt

[raynor85]

@mcmar did you manage to make it work with React Native 0.57? If yes, can you please share how you did it?

[mcmar]

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

[raynor85]

@mcmar So I have tried to do exactly as @damianthekreeeytor and you did, but after react-native start --reset-cache I run yarn storybook and I still have the same problem: the simulator doesn't connect to storybook

[raynor85]

@mcmar @damianthekreeeytor can you please share your package.json and yarn.lock? I really want to get to the bottom of this

[mcmar]

@raynor85 No. Clearing your node modules in the last step is just a one-time thing. Actually, I don't think it's really necessary. It's just a precaution. I think it's really only necessary if you install a different version of node.

Step 1 was the critical step for me that I was missing.
Step 2 is fairly obvious. When you do step 1, you always have to do step 2.
Steps 3 and 4 I was already doing. That's the typical react-native upgrade process.
Steps 5 and 6, I actually had to repeat with a few different libraries because it looks like react-native-git-upgrade did a bad job from 0.56 -> 0.57.
Step 7, imho, you could probably skip and be fine. It's just being overly-cautious.

[mcmar]

I also had a few steps that I didn't include in here. I had to delete the resolutions section from my package.json and then re-add it after doing react-native-git-upgrade because that was causing the upgrade script to fail. I also had to reset my .babelrc to the starting point that the upgrade script was expecting, which I found from the rn-diff repo

[ivansnek]

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

[prashant15108]

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

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Gongreg]

Hey, since this issue is relevant to #4011 I am closing this one.