Problems building for IE11

[philippsiegmund]

Summary

Hey there! I have problems building our page for IE11.
But there seem to more underlying issues as well and I think it comes from webpack or ES6 in modules or similar.
While starting with 'gatsby develop' I get 'WeakSet' not found, so I started manipulating with .babelrc and core-js, I tried core-js2 and 3, in devDependecies, in dependencies, I tried to change the webpack config, and currently I get the page builded on IE11 without google fonts, without Lottie animations, because gatsby mistakenly taken those as Graph Data.

I also found an open PR, which seems to modify the webpack config for ES6 modules, but currently I am happy for any input!

Best regards,

Philipp!

Environment (if relevant)

System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.14.1 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
Browsers:
Chrome: 73.0.3683.103
Firefox: 66.0.2
Safari: 12.1
npmPackages:
gatsby: ^2.3.23 => 2.3.23
gatsby-cli: ^2.4.11 => 2.5.8
gatsby-image: ^2.0.29 => 2.0.39
gatsby-plugin-copy-files: ^1.0.1 => 1.0.1
gatsby-plugin-manifest: ^2.0.16 => 2.0.29
gatsby-plugin-offline: ^2.0.25 => 2.0.25
gatsby-plugin-react-helmet: ^3.0.5 => 3.0.12
gatsby-plugin-sharp: ^2.0.19 => 2.0.34
gatsby-plugin-styled-components: ^3.0.5 => 3.0.7
gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
gatsby-source-filesystem: ^2.0.19 => 2.0.29
gatsby-transformer-json: ^2.1.7 => 2.1.11
gatsby-transformer-remark: ^2.2.3 => 2.3.8
gatsby-transformer-sharp: ^2.1.13 => 2.1.18

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `title`,
    description: `description`,
    author: `@magicsoup.io`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    'gatsby-plugin-offline',
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-web-font-loader`,
      options: {
        google: {
          families: ['Work Sans']
        }
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-magicsoup`,
        short_name: `magicsoup`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`
      },
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `locales`,
        path: `${__dirname}/src/locales/`
      }
    },
    {
      resolve: `gatsby-plugin-copy-files`,
      options: {
        source: `${__dirname}/src/locales`,
        destination: `/locales`
      }
    }
  ],
}

package.json:

{
  "name": "A magicsoup.io SPA",
  "description": "A SPA",
  "version": "0.0.9",
  "author": "Philipp Siegmund <philipp@zauberware.com>",
  "dependencies": {
    "@magicsoup.io/stock": "^0.0.11",
    "@wapps/gatsby-plugin-fonts": "^1.0.2",
    "@zauberware/react-scroll-to": "^0.1.1",
    "@zauberware/react-svg-assets": "^0.10.2",
    "babel-plugin-styled-components": "^1.10.0",
    "core-js": "^y2.6.5",
    "formik": "^1.5.2",
    "gatsby": "^2.3.23",
    "gatsby-cli": "^2.4.11",
    "gatsby-image": "^2.0.29",
    "gatsby-plugin-copy-files": "^1.0.1",
    "gatsby-plugin-manifest": "^2.0.16",
    "gatsby-plugin-offline": "^2.0.25",
    "gatsby-plugin-react-helmet": "^3.0.5",
    "gatsby-plugin-sharp": "^2.0.19",
    "gatsby-plugin-styled-components": "^3.0.5",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-source-filesystem": "^2.0.19",
    "gatsby-transformer-json": "^2.1.7",
    "gatsby-transformer-remark": "^2.2.3",
    "gatsby-transformer-sharp": "^2.1.13",
    "gsap": "^2.1.2",
    "i18next": "^11.3.6",
    "i18next-browser-languagedetector": "^2.2.2",
    "i18next-sync-fs-backend": "1.1.0",
    "i18next-xhr-backend": "^1.5.1",
    "lottie-web": "^5.5.1",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0",
    "react-i18next": "^7.9.0",
    "react-lottie": "^1.2.3",
    "react-modal": "^3.8.1",
    "react-pose": "^4.0.7",
    "react-slick": "0.23.1",
    "react-text-loop": "^2.0.1",
    "scrollmonitor-react": "^2.4.1",
    "styled-components": "^4.1.3",
    "styled-normalize": "^8.0.6",
    "styled-system": "^3.2.1",
    "xmlhttprequest": "^1.8.0",
    "yup": "^0.27.0"
  },
  "keywords": [
    "magicsoup.io"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",
    "heroku-postbuild": "gatsby build"
  },
  "heroku-run-build-script": true,
  "repository": {
    "type": "git",
    "url": "https://github.com/magicsoup-io/gatsby-starter-magicsoup"
  },
  "bugs": {
    "url": "https://github.com/magicsoup-io/gatsby-starter-magicsoup/issues"
  },
  "browserslist": [
    "> 1%",
    "IE >= 9",
    "last 2 versions"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "@babel/polyfill": "^7.0.0"
  }
}

gatsby-browser.js

import 'core-js/modules/es6.set'; // react-dom
import 'core-js/modules/es6.map'; // react-dom

import React, { Fragment } from "react"
import { ThemeProvider } from 'styled-components'
import ScrollToProvider from '@zauberware/react-scroll-to'
import { IconProvider } from '@zauberware/react-svg-assets'

import icons from './src/images/icons'
import theme from './src/styled/theme'
import GlobalStyle from './src/styled/global-styles'
import { I18nextProvider } from "react-i18next";
import i18n from './src/i18n'

export const wrapRootElement = ({ element }) => {
  return (
    <I18nextProvider i18n={i18n}>
      <ThemeProvider theme={theme}>
        <IconProvider icons={icons}>
          <ScrollToProvider>
            <Fragment>
              {element}
              <GlobalStyle />
            </Fragment>
          </ScrollToProvider>
        </IconProvider>
      </ThemeProvider>
    </I18nextProvider>
  )
}

gatsby-ssr.js:

import React, { Fragment } from 'react'
import { ThemeProvider } from 'styled-components'
import ScrollToProvider from '@zauberware/react-scroll-to'
import { IconProvider } from '@zauberware/react-svg-assets'

import icons from './src/images/icons'
import theme from './src/styled/theme'
import GlobalStyle from './src/styled/global-styles'

import { renderToString } from 'react-dom/server'
import { I18nextProvider } from "react-i18next"
import i18n from './src/i18n'
import Backend from 'i18next-sync-fs-backend'

export const wrapRootElement = ({ element }) => {
  return (
    <I18nextProvider i18n={i18n}>
      <ThemeProvider theme={theme}>
        <IconProvider icons={icons}>
          <ScrollToProvider>
            <Fragment>
              {element}
              <GlobalStyle />
            </Fragment>
          </ScrollToProvider>
        </IconProvider>
      </ThemeProvider>
    </I18nextProvider>
  )
}

export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
  i18n
    .use(Backend)
    .init({
      lng:'de',
      fallbackLng: 'de',
      initImmediate: false,
      nsSeparator: ':::',
      keySeparator: '::',
      debug: true,
      backend: {
        // when this site renders serverside we want to get the locales from the src folder
        loadPath: 'src/locales/{{lng}}/{{ns}}.json',
      },
    })
    // load the common namespace
    .loadNamespaces(['common', 'about', 'competences', 'contact', 'features', 'header', 'hero', 'legal', 'stories', 'switch'], () => {
      replaceBodyHTMLString(renderToString(bodyComponent))
    });
}

[DSchau]

I get 'WeakSet' not found

This seems like something thrown from one of your vendored dependencies (e.g. node_modules). Also - the CoreJS import would seem to need to be weak-set additionally, e.g.

import 'core-js/modules/es.weak-set'

Would you be able to share a reproduction? Even a URL would be helpful, as well.

Thanks!

[philippsiegmund]

Thanks for your reply!!
I will try to get a nullified version online, but cannot promise..

I added core-js to the .babelrc, hoping that "some kind of magic" happens... Downgrading i18n-next, up- and downgrading gatsby, gatsby-cli, yarn, no success with my combinations.

The WeakSet problem is minor imho, because this only happens on gatsby develop, but I will try it to minimize any sources of error and chaos.

The .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false,
        "corejs": 2,
        "useBuiltIns": "usage",
        "shippedProposals": true,
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ],
    [
      "@babel/preset-react",
      {
        "useBuiltIns": true,
        "corejs": 2,
        "pragma": "React.createElement"
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "babel-plugin-macros",
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": true,
        "regenerator": true
      }
    ]
  ]
}

Another try was to modify the webpack config via gatsby-node.js with something like:

exports.onCreateWebpackConfig = ({ stage, getConfig, actions }) => {
  const config = getConfig()
  switch (stage) {
    case 'build-javascript':
      const app =
        typeof config.entry.app === 'string'
          ? [config.entry.app]
          : config.entry.app
      console.log(config)
      config.entry.app = ['core-js/features/array/from', 'core-js/features/promise', 'core-js/features/set', 'core-js/features/weak-set', ...app]
  }
  actions.replaceWebpackConfig(config)
}

But this led to other problems, where the internet suggested switching to core-js@3, which led to other problems, chasing down the rabbit hole..

[gatsbot]

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!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

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

[gatsbot]

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.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[wardpeet]

We know look for polyfills in node_modules as well.

Published in gatsby@2.11.0

[sbarry50]

Ran into this Weakset IE11 issue on Gatsby 2.19.45. Fixed it with gatsby-plugin-compile-es6-packages.

framesync was the module causing trouble for me so my gatsby-config.js entry looked like this and then it worked.

    {
      resolve: `gatsby-plugin-compile-es6-packages`,
      options: {
        modules: [`framesync`],
      },
    },