ReferenceError: Can't find variable: globalThis

Developing with Prismic
1

Hi,

We noticed our website displays a white page on older versions of Safari (IOS et MacOS).
Apparently, this is related to globalThis that is not supported on Safari 12.1 or before.

On a page using prismic.createClient(endpoint);, we have this :

ReferenceError: Can't find variable: globalThis

We use this stack:

"next": "^12.1.5",
 "@prismicio/client": "^6.0.0",

And when we follow the trace, we notice globalThis is used in the definition of class Client directly in the lib "@prismicio/client"; when we call prismic.createClient(endpoint);

We create and use our prismic client on server side.
We already tried to define globalThis if it's undefined or use a polyfill, but I guess the error happens before that, during the definition of the class Client.

Have you a solution or a tip to fix this kind of issues?

Thanks in advance for your feedbacks.

3

Hello @j.coxo

Welcome to the Prismic community and thanks for reaching out to us.

iOS Safari support for globalThis is version 12.2 or later.

For earlier versions, you will need a polyfill. check if globalThis is not defined then include the polyfill.

And if your app is always running in a browser replace globalThis with window.

Give this a try and let me know.

Thanks,
Priyanka

4

Hi Priyanka,

Sadly, I tried to use the package globalthis or redefine manually globalThis, but the error is still there :frowning:

More precisely, nothing change.

Thanks.

5

@j.coxo

Could you share the code you used to load the polyfill? In a Next.js app, this should be in the pages/_app.js. file.

Thanks,
Priyanka

6

Hi,

We finally resolved this issue:

We used globalthis package and call the method shim() just before initialization of the Prismic Client (in a custom prismic helpers file).

We use this client on server and client side, so we needed to declare globalThis not only in _app.tsx or in our getServerSideProps in route templates.

// ~/utils/prismicHelpers.ts

import globalthis from "globalthis";
import * as prismic from "@prismicio/client";
import { endpoint } from "../prismicConfiguration";

/**
 * globalThis polyfill:
 * Prevent error on IOS/MacOS version 12.1 or before
 * ReferenceError: Can't find variable: globalThis
 */
globalthis.shim();

/**
 * PRISMIC CLIENT
 */
// Initialises the Prismic Client that's used for querying the API and passes it any query options.
const prismicClient = prismic.createClient(endpoint);

Thanks for your help!