Usage with Storybook and react-native-web

I’m looking to create a docs site / component library using storybook. I have followed the instructions here: https://react-native-elements.github.io/react-native-elements/docs/web_usage.html

but when I compile the storybook, I’m getting the following error:

Module parse failed: Unexpected token (61:11) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Your Environment (please complete the following information):

{
  "name": "scandy-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.23",
    "@types/node": "12.12.11",
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.4",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-native-elements": "^1.2.7",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.7",
    "react-scripts": "3.2.0",
    "typescript": "3.7.2"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -c .storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@storybook/addon-actions": "^5.2.6",
    "@storybook/addon-docs": "^5.2.6",
    "@storybook/addon-links": "^5.2.6",
    "@storybook/addon-viewport": "^5.2.6",
    "@storybook/addons": "^5.2.6",
    "@storybook/preset-typescript": "^1.1.0",
    "@storybook/react": "^5.2.6",
    "babel-loader": "^8.0.6",
    "customize-cra": "^0.9.1",
    "react-app-rewired": "^2.1.5",
    "react-docgen-typescript-loader": "^3.5.0",
    "ts-loader": "^6.2.1"
  }
}

[cjam]

@neilgamb I ended up getting my storybook working with react-native-elements. It was just a matter of getting the right modules transpiled by babel. The webpack.config.js in my .storybook folder looks like this:

module.exports = ({ config }) => {

  const oneOfRules = config.module.rules[3];
  const babelLoader = oneOfRules.oneOf[1];
  babelLoader.include = [
    ...babelLoader.include,
    'node_modules/react-native-elements',
    'node_modules/react-native-vector-icons',
    'node_modules/react-native-ratings'
  ]

 return config;
}

You may also want to confirm that you either have the babel-plugin-react-native-web plugin installed and configured or that you’ve added a webpack resolve alias for `react-native’:‘react-native-web’.

Hope that helps.

[cjam]

I’m having a similar issue getting react-native-elements working in my typescript monorepo. It seems to be related to the webpack config but I just can’t seem to get it all working together.

I’ve got a repo structure like:

MyProject/
  packages/
    components/
    mobile/
    web/

My typescript projects are setup with references, and the components project is using react-native-elements and I’ve added the webpack config described here https://react-native-elements.github.io/react-native-elements/docs/web_usage.html. Everything compiles and runs fine in react-native but in the web project i get:

/MyProject/node_modules/react-native-elements/src/avatar/Avatar.js
SyntaxError: /MyProject/node_modules/react-native-elements/src/avatar/Avatar.js: Unexpected token (71:4)

  69 | 
  70 |   const Utils = showEditButton && (
> 71 |     <TouchableHighlight
     |     ^
  72 |       style={StyleSheet.flatten([
  73 |         styles.editButton,
  74 |         {

It’s choking on the jsx unfortunately. I compared all of the webpack config objects with the https://github.com/react-native-elements/create-react-app-example project but can’t seem to overcome this error. Anyone have any ideas?