IE11 - Unable to get property 'bind' of undefined or null reference

[pfftdammitchris]

Description

Users are receiving a blank white page for IE browsers (IE 11 and under) while every other browser displays the web site just fine. Spent a good 18 hours on this problem of the weekend and was not able to solve this mystery.

Update: This error is happening when doing gatsby build. However when using gatsby develop, it gives the error: webpack-hot-middleware's client requires EventSource to work. You should include a polyfill if you want to support this browser: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events#Tools. and: SCRIPT438: Object doesn't support property or method 'startsWith'.

If that is somehow related, please advise :)

Update #2: I put a console.log in the layout component before rendering children. It seems to console.log it normally to the console in other browsers, but its not even invoking the console log in IE. So it doesnt seem like a client side issue at the moment.

Expected result

It should render in IE

Actual result

Showing a blank page on IE. Here is the error in console:

Environment

Here is my package.json:

{
  "name": "*censored*",
  "description": "*censored*",
  "version": "1.0.0",
  "author": "*censored*",
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@material-ui/core": "^3.4.0",
    "@material-ui/icons": "^3.0.1",
    "@opentok/client": "^2.14.8",
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "dotenv": "^6.0.0",
    "gatsby": "^2.0.0-rc.28",
    "gatsby-image": "^1.0.55",
    "gatsby-plugin-google-analytics": "^1.0.31",
    "gatsby-plugin-google-fonts": "0.0.4",
    "gatsby-plugin-jss": "^2.0.2",
    "gatsby-plugin-layout": "^1.0.0-rc.4",
    "gatsby-plugin-manifest": "next",
    "gatsby-plugin-offline": "next",
    "gatsby-plugin-page-transitions": "^1.0.7",
    "gatsby-plugin-react-helmet": "^3.0.0-rc.1",
    "gatsby-plugin-sharp": "^2.0.0-rc.7",
    "gatsby-plugin-sitemap": "^2.0.0-rc.2",
    "gatsby-source-filesystem": "^2.0.1-rc.6",
    "gatsby-transformer-remark": "^2.1.1-rc.5",
    "gatsby-transformer-sharp": "^2.1.1-rc.3",
    "html-to-text": "^4.0.0",
    "html2canvas": "^1.0.0-alpha.12",
    "jspdf": "^1.4.1",
    "material-ui-pickers": "^1.0.0-rc.17",
    "normalizr": "^3.2.4",
    "prop-types": "^15.6.2",
    "react": "^16.7.0-alpha.0",
    "react-big-calendar": "^0.20.1",
    "react-dom": "^16.7.0-alpha.0",
    "react-file-reader-input": "^2.0.0",
    "react-google-maps": "^9.4.5",
    "react-helmet": "^5.2.0",
    "react-hot-loader": "^4.0.0",
    "react-icons": "^3.1.0",
    "react-jss": "^8.6.1",
    "react-lazyload": "^2.3.0",
    "react-localization": "^1.0.11",
    "react-redux": "^5.0.7",
    "react-signature-canvas": "^1.0.0-alpha.1",
    "react-stripe-elements": "^2.0.1",
    "react-text-mask": "^5.4.3",
    "react-toastify": "^4.3.1",
    "react-vertical-timeline-component": "^2.3.1",
    "react-virtualized": "^9.20.1",
    "redux": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-logger": "^3.0.6",
    "redux-saga": "^0.16.0",
    "reselect": "^3.0.1",
    "store": "^2.0.12",
    "video-react": "^0.13.0"
  },
  "keywords": [
    "*censored*"
  ],
  "license": "MIT",
  "scripts": {
    "build:test": "set GATSBY_API_ENV=testapi && gatsby build",
    "build:prod": "set GATSBY_API_ENV=api && gatsby build",
    "serve": "gatsby serve -p 3000",
    "start": "set GATSBY_API_ENV=testapi && gatsby develop -p 3000",
    "format": "prettier --write ./src/**/*.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "storybook": "start-storybook -p 9001 -c .storybook"
  },
  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@storybook/addon-actions": "^4.0.4",
    "@storybook/addon-backgrounds": "^4.0.4",
    "@storybook/addon-info": "^4.0.4",
    "@storybook/addon-links": "^4.0.4",
    "@storybook/addon-notes": "^4.0.4",
    "@storybook/addon-options": "^4.0.4",
    "@storybook/addons": "^4.0.4",
    "@storybook/react": "^4.0.4",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.2",
    "babel-preset-gatsby": "^0.1.3",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.0.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-hooks": "0.0.0",
    "gatsby-plugin-remove-trailing-slashes": "^1.0.9",
    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.3",
    "gatsby-transformer-json": "^1.0.20",
    "jest": "^23.6.0",
    "jest-dom": "^2.1.1",
    "jest-extended": "^0.10.0",
    "prettier": "^1.14.2",
    "prettier-eslint": "^8.8.2",
    "react-testing-library": "^5.2.3",
    "redux-devtools-extension": "^2.13.5",
    "regenerator-runtime": "^0.12.1",
    "storybook-addon-material-ui": "^0.9.0-alpha.16",
    "truevault": "^1.3.0"
  },
  "repository": {
    "type": "git",
    "url": "*censored*"
  }
}

.babelrc:

{
  "plugins": [],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": ["last 4 versions", "ie <= 9", "safari <= 7"]
        }
      }
    ]
  ]
}

gatsby-config.js

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    siteName: '*censored*',
    siteUrl: 'https://*censored*.com',
    siteTitle: '*censored*',
    siteDescription: '*censored*',
    siteKeywords: [],
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    'gatsby-transformer-json',
    'gatsby-transformer-remark',
    'gatsby-plugin-jss',
    {
      resolve: 'gatsby-plugin-manifest',
      // options: {
      //   name: '*censored*',
      //   short_name: '*censored*',
      //   start_url: '/',
      //   background_color: '#fff',
      //   theme_color: '#398FCD',
      //   display: '*censored*',
      // },
    },
    {
      resolve: 'gatsby-plugin-layout',
      options: {
        component: require.resolve('./src/components/Layout.js'),
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: `${__dirname}/src/resources`,
      },
    },
    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        output: '/sitemap.xml',
        query: `
          {
            site {
              siteMetadata {
                siteUrl
              }
            }
            allSitePage {
              edges {
                node {
                  path
                }
              }
            }
          }
        `,
      },
    },
    // 'gatsby-plugin-offline',
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: process.env.GOOGLE_TRACKING_ID,
      },
    },
  ],
}

[pfftdammitchris]

So I just took out 90% of my entire app and it still gives this mysterious error in IE.

This is how my layout component looks like, with children removed (edit: i'm also using gatsby-plugin-layout so this layout is the wrapper for a good portion of the client side):

<Fragment>
      <div style={containerStyle}>
        <main style={{ flexGrow: 1 }}>{null}</main>
      </div>
      <ToastContainer autoClose={10000} />
</Fragment>

That is beyond amazing. Just where is this error coming from? I've also tried removing material-ui, jss provider, redux, this error is just popping up at all times.

[pieh]

gatsby on itself should work on IE11 - last time I checked gatsbyjs.org was working there (with some styling issue, but was working). I would suspect some kind of packages that You use may be incompatible.

gatsby develop does have problem, but that's react-hot-loader issue :/

Would you be able to share your minimum repo ( "So I just took out 90% of my entire app and it still gives this mysterious error in IE." ), so I could take a look?

[pfftdammitchris]

@pieh I found out it's in the withRoot() HOC that is wrapping the layout component. Upon further progression I commented out react-redux Provider and the error went away.

I'm using redux-saga in redux and a bunch of them are using async/generator functions, maybe this might be breaking the app? Doesn't babel-preset-gatsby take care of the transpiling for them?

[DSchau]

@pfftdammitchris can you clarify this statement?

I'm using redux-saga in redux and a bunch of them are using async/generator functions

I don't think redux-saga is directly using generator functions, rather they're transpiling them for modern browser support. Check it out here

Doesn't babel-preset-gatsby take care of the transpiling for them?

This transpiles your src directory, but not your node_modules directory.

I'm inclined to think this probably is some node_modules dependency that's using code that isn't compatible with IE11. I think we'll look into transpiling node_modules--perhaps opt-in--sooner rather than later. It also shipped in create-react-app v2 so there's some prior evidence there that it could be worth doing.

[pfftdammitchris]

Yes it seems it wasn't redux-saga since I replaced it with redux thunk and the error came back all of a sudden. I'm going to check all the modules

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!