wrapPageElement not working during Netlify build

Description

wrapPageElement doesn't seem to be picked up during Netlify build even though it is in local.

Steps to reproduce

Here is my gatsby-browser.js:

import "./src/styles/styles.scss";
import { IntlProvider } from "react-intl";
import React from "react";

exports.wrapPageElement = ({
    element,
    props: {
        pageContext: { locale = "en" },
    },
}) => {
    const messages = require(`./src/intl/${locale}.json`);
    return (
        <IntlProvider locale={locale} messages={messages}>
            {element}
        </IntlProvider>
    );
};

Looking at some issues, I also tried to use commonjs modules:

require("./src/styles/styles.scss");
const { IntlProvider } = require("react-intl");
const React = require("react");
export const wrapPageElement = ({
    element,
    props: {
        pageContext: { locale = "en" },
    },
}) => {
    const messages = require(`./src/intl/${locale}.json`);
    return (
        <IntlProvider locale={locale} messages={messages}>
            {element}
        </IntlProvider>
    );
};

In my pages, I use const intl = useIntl(); and I am allowed to as every single page should be wrapped in the provider.

You can find the codebase here.

Expected result

In both cases, everything works perfectly locally.

Actual result

The build on Netlify fails:

8:28:12 PM: success Building production JavaScript and CSS bundles - 18.215s
8:28:12 PM: success Rewriting compilation hashes - 0.001s
8:28:22 PM: success run queries - 27.902s - 19/19 0.68/s
8:30:36 PM: success Generating image thumbnails - 143.371s - 280/280 1.95/s
8:30:38 PM: failed Building static HTML for pages - 2.163s
8:30:38 PM: error Building static HTML failed for path "/en/about"
8:30:38 PM:   2 |     if (Err === void 0) { Err = Error; }
8:30:38 PM:   3 |     if (!condition) {
8:30:38 PM: > 4 |         throw new Err(message);
8:30:38 PM:     | ^
8:30:38 PM:   5 |     }
8:30:38 PM:   6 | }
8:30:38 PM:   7 |
8:30:38 PM: 
8:30:38 PM:   WebpackError: [React Intl] Could not find required `intl` object. <IntlProvide  r> needs to exist in the component ancestry.
8:30:38 PM:   
8:30:38 PM:   - invariant.js:4 invariant
8:30:38 PM:     node_modules/@formatjs/intl-utils/lib/invariant.js:4:1
8:30:38 PM:   
8:30:38 PM:   - utils.js:38 invariantIntlContext
8:30:38 PM:     node_modules/react-intl/lib/utils.js:38:14
8:30:38 PM:   
8:30:38 PM:   - message.js:39 Object.react__WEBPACK_IMPORTED_MODULE_0__.createElement [as ch    ildren]
8:30:38 PM:     node_modules/react-intl/lib/components/message.js:39:37
8:30:38 PM:   
8:30:38 PM: 
8:30:39 PM: Skipping functions preparation step: no functions directory set

This means the pages aren't wrapped in the provider, which they are in local.

Environment

The following information is from my machine, so not everything is relevant for the bug as it is happening on Netlify:

  System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.2.0 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.13.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 13.0.4
  npmPackages:
    gatsby: ^2.18.12 => 2.18.12
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
    gatsby-plugin-sass: ^2.1.27 => 2.1.27
    gatsby-plugin-sharp: ^2.3.13 => 2.3.13
    gatsby-remark-images: ^3.1.42 => 3.1.42
    gatsby-source-filesystem: ^2.1.46 => 2.1.46
    gatsby-transformer-remark: ^2.6.48 => 2.6.48
  npmGlobalPackages:
    gatsby-cli: 2.8.27

The bug can obviously come from them, but it could also be something wrong within Gatsby.

gatsbyjs / gatsby