Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
MasahiroMorita opened this issue Jun 30, 2017 · 1 comment

Comments

@MasahiroMorita
Copy link

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
Copy link
Author

UPDATE:
I found that storybook on RN works when:

  • change index.ios.js in root dir (not in ~/storybook/) to:
import StorybookUI from './storybook';
export default StorybookUI;
  • then run packager and storybook server separately by:
$ storybook start -p 7007 --skip-packager

Then, it works correctly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants