search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.61k stars 9.31k forks source link

Error on React Native: Unhandled JS Exception: TypeError: babelHelpers.typeof is not a function #1392

Closed MasahiroMorita closed 7 years ago

MasahiroMorita commented 7 years ago

Please help me.

I'm trying to use storybook on React Native, but it cause an error.

react-native log-ios shows:

<Critical>: Unhandled JS Exception: TypeError: babelHelpers.typeof is not a function. (In 'babelHelpers.typeof(typeof Symbol === "function" ? Symbol.iterator : "@@iterator")', 'babelHelpers.typeof' is undefined) (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:1020)

The configuration files are like this:

.babelrc :

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

package.json:

{
  "name": "Gamba",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start-native": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest src",
    "test-native": "jest --config=jest.config.json __tests__/*",
    "build-web": "webpack --config webpack.production.config.js --progress --profile --colors",
    "start-web": "webpack-dev-server --progress --profile --colors",
    "lint": "eslint --ext js --ext jsx src || exit 0",
    "dev-web": " webpack-dashboard -- webpack-dev-server --progress --profile --colors",
    "storybook-web": "start-storybook -p 9000",
    "storybook-ios": "storybook start -p 7007",
    "build-storybook": "build-storybook",
    "toolbox": "react-toolbox-themr"
  },
  "dependencies": {
    "dompurify": "^0.9.0",
    "emojione": "^3.0.3",
    "googleapis": "^19.0.0",
    "history": "^4.6.1",
    "i18next": "^8.3.0",
    "material-ui": "^0.18.1",
    "moment": "^2.18.1",
    "node-sass": "^4.3.0",
    "postcss": "^6.0.2",
    "postcss-cssnext": "^2.11.0",
    "raw-loader": "^0.5.1",
    "react": "16.0.0-alpha.12",
    "react-dom": "16.0.0-alpha.12",
    "react-i18next": "^4.1.0",
    "react-infinite-scroller": "git://github.com/getgamba/react-infinite-scroller.git",
    "react-native": "^0.45.1",
    "react-native-vector-icons": "^4.1.1",
    "react-notification-badge": "^1.3.4",
    "react-redux": "^5.0.5",
    "react-router": "^3.0.5",
    "react-router-redux": "^4.0.8",
    "react-spinkit": "^3.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "react-toolbox": "^2.0.0-beta.12",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.6",
    "redux-mediaquery": "^0.10.0",
    "redux-thunk": "^2.2.0",
    "redux-ui": "^0.1.1",
    "sass-loader": "^6.0.2",
    "squire-rte": "^1.8.9"
  },
  "devDependencies": {
    "@storybook/react": "^3.1.7",
    "@storybook/react-native": "^3.1.6",
    "babel-cli": "6.24.1",
    "babel-core": "^6.23.1",
    "babel-jest": "20.0.3",
    "babel-loader": "^6.3.2",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-react": "^6.23.0",
    "babel-preset-react-native": "^2.0.0",
    "babel-runtime": "^6.22.0",
    "css-loader": "0.26.1",
    "enzyme": "^2.8.2",
    "extract-text-webpack-plugin": "^v2.0.0-rc.1",
    "file-loader": "^0.10.0",
    "form-data": "^2.1.4",
    "html-webpack-plugin": "^2.26.0",
    "http-shutdown": "^1.2.0",
    "jest": "20.0.3",
    "jest-react-native": "^18.0.0",
    "postcss-cssnext": "^2.11.0",
    "postcss-each": "^0.10.0",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-mixins": "^6.0.0",
    "react-addons-test-utils": "^15.5.1",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-stubber": "^1.0.0",
    "react-test-renderer": "16.0.0-alpha.12",
    "redux-mock-store": "^1.2.3",
    "socket.io": "^2.0.3",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "w3c-xmlhttprequest": "^2.1.2",
    "webpack": "^2.2.1",
    "webpack-cleanup-plugin": "^0.4.2",
    "webpack-dashboard": "^0.3.0",
    "webpack-dev-server": "^2.4.1"
  },
  "jest": {
    "globals": {
      "__DEV__": true
    }
  },
  "rnpm": {
    "assets": [
      "./roboto-fonts"
    ]
  }
}
MasahiroMorita commented 7 years ago

UPDATE: I found that storybook on RN works when:

Then, it works correctly.