CODEWITHSUNDEEP
javascriptfacebookreactjswebpackbabeljs
Rob McMackin
Rob McMackin

Reputation: 111

React App Crashes when viewed through Facebook Webview

Encountering a bizarre issue where our site works on all mobile devices and browsers, but crashes when accessed through Facebook or Instagram's webview on mobile on Android (iPhone works). For instance when the site is accessed through our Facebook our Instagram bio or when sent through messenger.

Seems to be no information or way to debug this.

We're using React and Webpack.

Here's our package.json

`

{
  "name": "omnious.com",
  "version": "2.0.0",
  "private": true,
  "description": "Homepage for Omnious",
  "homepage": "https://bitbucket.org/omniousstudio/omnious.com",
  "author": "Omnious Dev Team <[email protected]> (https://www.omnious.com)",
  "license": "UNLICENSED",
  "repository": {
    "type": "git",
    "url": "git+https://bitbucket.org/omniousstudio/omnious.com.git"
  },
  "bugs": {
    "url": "https://bitbucket.org/omniousstudio/omnious.com/issues"
  },
  "keywords": [
    "omnious"
  ],
  "main": "app",
  "scripts": {
    "analyze": "node scripts/analyze.js",
    "build": "node scripts/build.js",
    "dev": "node scripts/dev.js",
    "start": "node app"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "chalk": "^2.1.0",
    "compression-webpack-plugin": "^1.0.0",
    "dotenv": "^4.0.0",
    "express": "^4.15.4",
    "happypack": "^4.0.0-beta.5",
    "html-webpack-plugin": "^2.30.1",
    "koa": "^2.3.0",
    "koa-bodyparser": "^4.2.0",
    "koa-compress": "^2.0.0",
    "koa-helmet": "^3.2.0",
    "koa-router": "^7.2.1",
    "koa-static": "^4.0.1",
    "mailchimp-api-v3": "^1.7.0",
    "morgan": "^1.8.2",
    "offline-plugin": "^4.8.3",
    "ora": "^1.3.0",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-copy-to-clipboard": "^5.0.0",
    "react-dev-utils": "^4.0.1",
    "react-dom": "^15.6.1",
    "react-helmet": "^5.2.0",
    "react-intl": "^2.3.0",
    "react-modal": "^2.2.4",
    "react-redux": "^5.0.6",
    "react-remarkable": "^1.1.1",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-saga": "^0.15.6",
    "rimraf": "^2.6.1",
    "styled-components": "^2.1.2",
    "webpack": "^3.5.6",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^4.1.0",
    "winston": "^2.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "eslint": "^4.6.1",
    "eslint-config-omnious": "^0.2.3",
    "eslint-config-omnious-react": "^0.2.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.3.0",
    "file-loader": "^0.11.2",
    "nodemon": "^1.12.0",
    "url-loader": "^0.5.9"
  }
}

`

Upvotes: 0

Views: 211

Answers (1)

Rob McMackin
Rob McMackin

Reputation: 111

In case anybody else is running into this, the issue was we were using object tags for SVG in react. Facebook's Android browser does not support object tags and crashes.

Upvotes: 1

Related Questions