Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[11.1.3-canary.104] ReferenceError: PerformanceObserver is not defined

See original GitHub issue

What version of Next.js are you using?

11.1.3-canary.104

What version of Node.js are you using?

14.18.0

What browser are you using?

Firefox

What operating system are you using?

Windows

How are you deploying your application?

Vercel

Describe the Bug

With the latest canary, I am noticing tests failing due to PerformanceObserver not being defined. This issue didn’t happen in in the previous canary or in LTS.

Expected Behavior

My tests shouldn’t fail or if I need to add a mock for this, there should be some updated documentation to support.

Reproduce

I have a modal that has an Image component, I am seeing this error in my jest logs:

Error: Uncaught [ReferenceError: PerformanceObserver is not defined]

console.error
    The above error occurred in the <Image> component:
    
        at Image (/home/wade/Code/Clients/rhythm-marketing/node_modules/next/client/image.tsx:307:3)
        at div
        at Modalstyled__ModalIcon (/home/wade/Code/Clients/rhythm-marketing/node_modules/styled-components/src/models/StyledComponent.js:252:3)
        at div
        at Layout__FlexBox (/home/wade/Code/Clients/rhythm-marketing/node_modules/styled-components/src/models/StyledComponent.js:252:3)
        at div
        at Modalstyled__ModalDialog (/home/wade/Code/Clients/rhythm-marketing/node_modules/styled-components/src/models/StyledComponent.js:252:3)
        at div
        at Modalstyled__ModalPageContainer (/home/wade/Code/Clients/rhythm-marketing/node_modules/styled-components/src/models/StyledComponent.js:252:3)
        at Modal (/home/wade/Code/Clients/rhythm-marketing/src/components/Modal/Modal.component.tsx:37:3)
        at Object.<anonymous>.exports.ThemeProvider (/home/wade/Code/Clients/rhythm-marketing/node_modules/styled-components/src/models/ThemeProvider.js:24:7)
        at I18nextProvider (/home/wade/Code/Clients/rhythm-marketing/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
        at Providers (/home/wade/Code/Clients/rhythm-marketing/test-utils.tsx:48:26)

Issue Analytics

State:
Created 2 years ago
Reactions:4
Comments:6 (3 by maintainers)

Top GitHub Comments

2reactions

ijjkcommented, Oct 27, 2021

Hi, the above PR is now available in v12.0.1 of Next.js, please update and give it a try!

2reactions

miketheodoroucommented, Oct 26, 2021

I was able to work around this for now by adding this to my jest.setup.js

// Mock Performance Observer for next/image
beforeAll(() => {
  const mockPerformanceObserver = jest.fn();
  mockPerformanceObserver.mockReturnValue({
    observe: () => null,
  });
  global.PerformanceObserver = mockPerformanceObserver;
});