Why Did You Render Example Does Nothing

[AlbinoGeek]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Not Applicable, doesn't work in Next 12 or 13.

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.16.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.16.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.20-canary.0
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

• next info doesn't work in yarn environments anymore?
• Also tested under Fedora Workstation 33... not that it would matter.

Which example does this report relate to?

with-why-did-you-render

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Why Did You Render does nothing. No logs are added to the console on page load.

Expected Behavior

The console should be absolutely spammed with WDYR messages.

To Reproduce

With Example Repo

1. Clone or Download this Repository
2. cd into examples/why-did-you-render
3. Install deps yarn install
4. Run the app yarn run dev

Without Example Repo

Or, in your existing project, make the following changes;

src/components/content/Hero.tsx

// Should not even be required but still...
Hero.whyDidYouRender = true

export default Hero

src/pages/_app.tsx

import 'wdyr'

// ...

src/pages/index.tsx

// Should not even be required but still...
IndexPage.whyDidYouRender = true

export default IndexPage

wdyr.ts

/**
 * WDYR (why-did-you-render) helps locate unnecessary re-renders.
 * Applied in development environment, on the frontend only.
 *
 * It will only log unnecessary re-renders, not expected re-renders.
 *
 * @see https://github.com/welldone-software/why-did-you-render
 * @see https://github.com/vercel/next.js/tree/canary/examples/with-why-did-you-render
 */
import React from 'react'

if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const whyDidYouRender = require('@welldone-software/why-did-you-render')

  // eslint-disable-next-line no-console
  console.debug('Applying whyDidYouRender, to help you locate unnecessary re-renders during development. See https://github.com/welldone-software/why-did-you-render')

  // See https://github.com/welldone-software/why-did-you-render#options
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackHooks:             true,
    logOwnerReasons:        true,
    collapseGroups:         true,
  })
}

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.