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

andycloke · 2018-07-18T10:44:33Z

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:

Create a new react-native app: react-native init test --template typescript
Setup typescript support : cd test && node setup.js
getstorybook
replace storybook command with storybook start -p 7007 --metro-config $PWD/rn-cli.config.js
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"]
}

The text was updated successfully, but these errors were encountered:

alimek · 2018-07-18T13:19:59Z

the same error exist even without typescript

jimmytb · 2018-07-18T13:41:02Z

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 · 2018-07-19T19:13:25Z

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 · 2018-07-19T19:21:19Z

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 · 2018-07-20T10:10:19Z

That works for me too @swese44. Nice one!

ashutosh-akss · 2018-07-21T13:18:06Z

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

Navin77 · 2018-07-23T10:58:49Z

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 · 2018-07-23T11:45:20Z

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 · 2018-07-25T05:24:04Z

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

vaibhavk98 · 2018-07-29T11:37:28Z

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 · 2018-07-31T12:50:48Z

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 · 2018-08-08T21:59:12Z

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 · 2018-08-26T12:58:03Z

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

MJ0826 · 2018-08-30T10:14:46Z

@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 · 2018-09-02T22:40:02Z

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

igor-dv · 2018-09-03T08:44:40Z

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

devmetal · 2018-09-11T13:34:58Z

@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 · 2018-09-12T04:51:50Z

Downgrading to ^4.0.1 did the trick to me

raynor85 · 2018-09-12T18:16:09Z

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

damianthekreeeytor · 2018-09-13T23:46:54Z

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

change the version number for "babel-preset-react-native" in package.json to: "babel-preset-react-native": "^4.0.1"
I am using yarn so run yarn install
Run react-native-git-upgrade
Fix any conflicts; I had one
Remove babel-preset-react-native: yarn remove babel-preset-react-native
Install metro-react-native-babel-preset yarn add -D metro-react-native-babel-preset
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 · 2018-09-14T14:48:46Z

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

raynor85 · 2018-09-14T15:09:33Z

@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 · 2018-09-14T15:19:53Z

@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 · 2018-09-14T15:35:18Z

@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 · 2018-09-14T19:32:02Z

@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 · 2018-09-19T23:45:53Z

@damianthekreeeytor You are a god amongst men. #3897 (comment) saved my butt

raynor85 · 2018-09-25T22:32:57Z

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

mcmar · 2018-09-25T23:06:09Z

@raynor85 I just followed the directions in #3897 (comment) 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 · 2018-09-25T23:21:44Z

@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 · 2018-09-26T00:29:46Z

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

mcmar · 2018-09-26T00:38:30Z

@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 · 2018-09-26T00:42:14Z

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 · 2018-10-01T13:45:26Z

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 · 2018-10-18T05:31:58Z

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

stale · 2018-11-08T06:01:49Z

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 · 2018-11-08T10:15:56Z

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

darrencruse mentioned this issue Aug 18, 2018

No version of 'react-native-dom' found that satisfies a peer dependency on '[email protected]' vincentriemer/react-native-dom#62

Open

sregg mentioned this issue Aug 23, 2018

React-Native: "Can't find variable: document" #4063

Closed

igor-dv added question / support configuration babel / webpack react-native labels Sep 3, 2018

raynor85 mentioned this issue Sep 25, 2018

Support React Native >=0.56 #4011

Closed

stale bot added the inactive label Nov 8, 2018

Gongreg closed this as completed Nov 8, 2018

hayanisaid mentioned this issue Feb 21, 2019

Broken with [email protected] due to packager (local-cli) API change #4179

Closed

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

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

Comments

andycloke commented Jul 18, 2018

Bug or support request summary

Steps to reproduce:

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

Screenshots / Screencast / Code Snippets (Optional)

alimek commented Jul 18, 2018

jimmytb commented Jul 18, 2018 • edited Loading

swese44 commented Jul 19, 2018

swese44 commented Jul 19, 2018

andycloke commented Jul 20, 2018

ashutosh-akss commented Jul 21, 2018

Navin77 commented Jul 23, 2018 • edited Loading

anchetaWern commented Jul 23, 2018

prathamudeshmukh commented Jul 25, 2018 • edited Loading

vaibhavk98 commented Jul 29, 2018

fiznool commented Jul 31, 2018

hersonrodrigues commented Aug 8, 2018 • edited Loading

meidikawardana commented Aug 26, 2018

MJ0826 commented Aug 30, 2018

goncalvesej commented Sep 2, 2018

igor-dv commented Sep 3, 2018

devmetal commented Sep 11, 2018

ivansnek commented Sep 12, 2018

raynor85 commented Sep 12, 2018

damianthekreeeytor commented Sep 13, 2018 • edited Loading

raynor85 commented Sep 14, 2018 • edited Loading

raynor85 commented Sep 14, 2018

ivansnek commented Sep 14, 2018 • edited Loading

raynor85 commented Sep 14, 2018

ivansnek commented Sep 14, 2018

mcmar commented Sep 19, 2018

raynor85 commented Sep 25, 2018

mcmar commented Sep 25, 2018 • edited Loading

raynor85 commented Sep 25, 2018 • edited Loading

raynor85 commented Sep 26, 2018

mcmar commented Sep 26, 2018

mcmar commented Sep 26, 2018

ivansnek commented Oct 1, 2018

prashant15108 commented Oct 18, 2018 • edited Loading

stale bot commented Nov 8, 2018

Gongreg commented Nov 8, 2018 • edited Loading

jimmytb commented Jul 18, 2018 •

edited

Loading

Navin77 commented Jul 23, 2018 •

edited

Loading

prathamudeshmukh commented Jul 25, 2018 •

edited

Loading

hersonrodrigues commented Aug 8, 2018 •

edited

Loading

damianthekreeeytor commented Sep 13, 2018 •

edited

Loading

raynor85 commented Sep 14, 2018 •

edited

Loading

ivansnek commented Sep 14, 2018 •

edited

Loading

mcmar commented Sep 25, 2018 •

edited

Loading

raynor85 commented Sep 25, 2018 •

edited

Loading

prashant15108 commented Oct 18, 2018 •

edited

Loading

Gongreg commented Nov 8, 2018 •

edited

Loading