Regression of tippy.js between 13.4.10-canary.0 and 13.4.10-canary.1

[damianfrizzi]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:22 PDT 2023; root:xnu-8796.121.3~7/RELEASE_X86_64
Binaries:
  Node: 18.15.0
  npm: 9.6.6
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 13.4.12
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/damianfrizzi/nextjs-tippy-regression

To Reproduce

• Clone the minimal repro
• Run yarn dev -> everything works fine
• Run yarn build and yarn start -> app crashes with Application error: a client-side exception has occurred (see the browser console for more information).

Describe the Bug

We tried to upgrade to the latest Next.js and it broke pages that where using @tippyjs/react.
This only happens in production. Everything works correctly in development.

Git bisect shows me that the regression was introduced between 13.4.10-canary.0 (good) and 13.4.10-canary.1 (bad).

Expected Behavior

• The behaviour between development and production should be the same
• The app shouldn't crash in production

[crypt0miester]

can confirm. having the same issue with tippy 4.2.6 on >13.4.10 as well. downgrading to =13.4.9 fixed it.

[focux]

I'm experiencing this as well. It broke after upgrading the Next.js version and it works on development but not in production. Tippy's author also confirmed that this looks like a minification issue on Next.js atomiks/tippyjs-react#379

[icyJoseph]

Hi,

Disabling swcMinify fixes the issue:

• https://nextjs.org/docs/architecture/nextjs-compiler#minification

Which leads me to believe this is an issue with SWC, as this playground, somewhat shows.

What happens is that the className plugin from tippy gets resolved to an empty object when minifying, and there's no fn property on such empty object.

• https://github.com/atomiks/tippyjs-react/blob/master/src/className-plugin.js

[icyJoseph]

I guess the course of action here is to track these (?):

• The consts was removed in the latest version。 swc-project/swc#7700
• Object properties are incorrectly erased when using hoist_props swc-project/swc#7710

And this, already closed, but related issue: #53096

[kdy1]

This will be fixed by swc-project/swc#7702

[shanehoban]

This looks like it was added, but then reverted in a canary release.

Any further updates on this?

[shanehoban]

Thanks for the work on this, but it seems the issue is not resolved with the changes contained in release 13.4.13-canary.13.

The error persists as described by the OP. Working locally, but errors out when built and run on production.

[Geminii]

We are facing the same issue too 😭
Waiting for next version to upgrade 🙈

[clementgateaud]

We are also facing this issue with Tippy 😰

[kdy1]

Well, this is already fixed. I did yarn add next@canary.

@shanehoban Please retry

[shanehoban]

@kdy1 thanks once again, but this still does not appear to be resolved for me, on latest canary:

Deployment here: https://chatterbox-hodev-5zx94dxmi-h-o.vercel.app/

window.next.version = '13.4.13-canary.18'

[kdy1]

@shanehoban Please provide a repro

[shanehoban]

@kdy1 Here's one with the latest canary release: "next": "^13.4.14-canary.0",

https://github.com/shanehoban/nextjs-tippy-issue/

Just to be clear, it works during development, only fails when built for production.

[kdy1]

@shanehoban

I did

• clone
• npm ci
• rm -rf .next && yarn next build && yarn next start

[shanehoban]

Not sure why it's working for you but not others, or myself:

[icyJoseph]

Works for me too, using:

  Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.16.0
      npm: 9.7.1
      Yarn: 1.22.19
      pnpm: 7.22.0
    Relevant Packages:
      next: 13.4.14-canary.0
      eslint-config-next: 13.4.13
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

[shanehoban]

I deployed my github repo above, and it fails on vercel, this isn't completely closed yet I would imagine:

https://nextjs-tippy-issue.vercel.app/

Deployment ID: DG1D2kjN5QVhNNgp1bEXorZecWHy

[leffot]

Can report that we're having the same issue here. Works locally and fails in production.

[kdy1]

@leffot Please provide a repro

[shanehoban]

@kdy1 have you tried deploying this repo to vercel? The issue is present when deployed even though it works for you locally.

[kdy1]

@shanehoban Yes it works

[shanehoban]

It doesn't though?

https://nextjs-tippy-issue.vercel.app/

On version 13.4.14-canary.1

Repo deployed: https://github.com/shanehoban/nextjs-tippy-issue

[icyJoseph]

Does it fail locally for you @shanehoban? What Node version does the deployed version use?

[shanehoban]

@icyJoseph Yeah it fails for me when built and run locally for prod (so the same outcome as the vercel deployment).

I'm on Node v18.17.0 on my local machine (Ubuntu via WSL) and vercel node is set to 18.x

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 18.17.0
      npm: 9.6.7
      Yarn: 1.22.18
      pnpm: N/A
    Relevant Packages:
      next: 13.4.14-canary.1
      eslint-config-next: 13.4.14-canary.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

[shartte]

It works for me when building on Windows and fails when building on Ubuntu (Github Actions).

NextJS 13.4.13

p.s.: this is for a static site export, there is no Node on the deployed version

[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.