Gatsby: [Firefox] Unhandled promise rejection TypeError: "this.loadPageDataJson(...).then(...).finally is not a function

[arnauguadall]

Description

When I run in localhost works ok with all the browsers including Firefox but when it goes to production the Firefox v68.0.1 looks misaligned caused (I guess) for this .finally function.

Steps I tried

I tried to use "gatsby-plugin-compile-es6-packages": "^2.1.0" to compile es6 features like they are using in #2177 but without luck.

Also I tried:

exports.modifyWebpackConfig = ({ config, stage }) => {
  switch (stage) {
      case "build-javascript":
          const app = config._config.entry.app;
          config._config.entry.app = [require.resolve("./polyfills"), app];

          break;
      default:
          break;
  }

  return config;
};

Expected result

What should happen?

Works ok with Chrome (v75.0.3770.142).

Actual result

Returns a console error which for what I found it's something that .finally() function is quite new and maybe is not fully supported yet.

Unhandled promise rejection TypeError: 
"this.loadPageDataJson(...).then(...).finally is not a function"

How it looks like in Firefox (v68.0.1)

Also I'm using "antd": "^3.12.3" package to handle the UI and in this CSS class if you change flex-direction: column to row it looks ok but the error still persists.

.ant-layout {
    display: flex;
    flex: auto;
    flex-direction: column;
    min-height: 0;
    background: #f0f2f5;

Environment

System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.87
    Firefox: 68.0.1
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.0.76 => 2.13.45
    gatsby-image: ^2.0.20 => 2.2.7
    gatsby-mdx: 0.6.3 => 0.6.3
    gatsby-plugin-antd: ^2.0.2 => 2.0.2
    gatsby-plugin-compile-es6-packages: ^2.1.0 => 2.1.0
    gatsby-plugin-google-analytics: ^2.0.9 => 2.1.6
    gatsby-plugin-less: ^2.0.8 => 2.1.2
    gatsby-plugin-manifest: ^2.0.9 => 2.2.4
    gatsby-plugin-offline: ^2.0.16 => 2.2.4
    gatsby-plugin-react-helmet: ^3.0.2 => 3.1.2
    gatsby-plugin-react-svg: ^2.1.1 => 2.1.1
    gatsby-plugin-sass: (internal URL) => 2.0.11
    gatsby-plugin-sharp: ^2.0.18 => 2.2.9
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-remark-autolink-headers: ^2.0.14 => 2.1.3
    gatsby-remark-copy-linked-files: ^2.0.8 => 2.1.4
    gatsby-remark-images: ^3.0.1 => 3.1.7
    gatsby-source-filesystem: ^2.0.25 => 2.1.7
    gatsby-source-git: ^1.0.1 => 1.0.1
    gatsby-source-graphql: ^2.0.8 => 2.1.3
    gatsby-transformer-remark: ^2.2.4 => 2.6.10
    gatsby-transformer-sharp: ^2.1.8 => 2.2.5
  npmGlobalPackages:
    gatsby-cli: 2.7.9

[elken]

Promise.prototype.finally is supported in current firefox but I suspect this could be an upstream bug.

[Chalarangelo]

Is there any easy way to polyfill this for the time being? Some plugin or configuring webpack etc?

I can confirm this is a bug, but only in production mode. If I run it in dev mode, it works just fine.

[elken]

It's supported in the browser, there's no need.

[Chalarangelo]

@elken I know it is, but somehow it does not work in FF 68 (which seems to support it), at least in production. This will break my website sooner or later for some users. Can I configure my project in such a way that this does not break the website on FF 68 or older? Thanks in advance! :pray:

[arnauguadall]

What @Chalarangelo asked would work for me too for now, if there is some workaround until they implement this.

[sidharthachatterjee]

@Chalarangelo According to https://caniuse.com/#feat=promise-finally, finally is supported in Firefox all the way back to Firefox 58 🙂

@arnauguadall Could you please link to a minimal reproduction?

The default starter works fine in Firefox 68

[coreyward]

We're experiencing this on Canvas 1839 as well if you care to see it happen, @sidharthachatterjee (source maps are on).

[coreyward]

It looks like loader.js is importing a polyfill (import "core-js/modules/es7.promise.finally"), so that might be what's causing the issue.

Specifically, this is triggered when a Gatsby Link is hovered over, which prompts the page-data.json file to be loaded.

[elken]

The polyfill should be only required on versions <58, if that's the problem.

[arnauguadall]

Then @coreyward, could be an alternative change that loader.js to not use .finally() function?

Would be something like include async at the beginning and change .finally() for await.

In loader.js

  async loadPage(rawPath) {

    const inFlight = this.loadPageDataJson(pagePath)
      .then(result => {
        if (result.notFound) {

           // code 

          this.pageDb.set(pagePath, finalResult)
          return pageResources
        })
      })
      // remove .finally()
      /*
      .finally(() => {
        this.inFlightDb.delete(pagePath)
      })
      */

    await this.inFlightDb.delete(pagePath) // use await instead

    this.inFlightDb.set(pagePath, inFlight)
    return inFlight
  }

Maybe another solution would be nest another .then() at the end.

[philJohnson]

I'm having the same issue with a site as well. I have found that the Firefox Beta has fixed this but that's not released until Sept 3. In their notes it does have a known bug about Promise. Anyone know which version of Gatsby 2 was stable?

[philJohnson]

FYI, I reverted back to "gatsby": "2.12.0" in my package.json dependencies and it resolved my issues

[coreyward]

@wardpeet You self-assigned this. Do you need more info than the above?

[Chalarangelo]

I can confirm that, for now, reverting to 2.12.0 works fine on Firefox.

[arnauguadall]

I removed some custom component I had in another folder that I assume they used .finally() function and now are gone. It's ok for temporary solution but would be nice to know why when you combine gatsby/Firefox crashes.

[peter-mouland]

thank guys, i can confirm the break was in 2.12.1. 2.12.0 works for me also.

Here is a fix. https://github.com/gatsbyjs/gatsby/pull/16734/files

I've not used async/await as that would change the behaviour of the function, instead i've opted to dupe the finally code in a then and catch. This mean there is no change in code behaviour.

[wardpeet]

[email protected] has fixed the firefox(finally) bug. Thank you @peter-mouland