search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.12k stars 26.73k forks source link

Compiling react-tooltip in a next.js app can overwrite globals when swcMinify is true #47005

Closed ryanjduffy closed 1 year ago

ryanjduffy commented 1 year ago

Verify canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:29 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T8101
    Binaries:
      Node: 16.14.2
      npm: 8.5.0
      Yarn: 1.22.19
      pnpm: 6.11.0
    Relevant packages:
      next: 13.2.4-canary.9
      eslint-config-next: 13.2.3
      react: 18.2.0
      react-dom: 18.2.0

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

SWC minifier (swcMinify: true)

Link to the code that reproduces this issue

https://github.com/ryanjduffy/nextjs-bug-react-tooltip

To Reproduce

  1. npm create next-app
  2. yarn add react-tooltip
  3. Add the tooltip component to index.js
  4. next build && next start the app and trigger the tooltip

Describe the Bug

When using react-tooltip (v5.10) with a new next.js app (v13.2) (created with npm create next-app), the compiled output when swcMinify: true of react-tooltip by SWC overwrites global variables breaking other module imports.

The replay below includes some comments pointing out the execution behavior in which a points to the react jsx runtime import on one render and then to an integer in a future render.

https://app.replay.io/recording/nextjs-react-tooltip-build-failure--78392709-938c-4efb-993d-40798eff5e7e

And a loom of me walking through the replay

https://www.loom.com/share/6815156c9ff14eb8ad6cbd7b7321d785

Expected Behavior

Globals are not overwritten :)

Which browser are you using? (if relevant)

n/a

How are you deploying your application? (if relevant)

n/a

JesseKoldewijn commented 1 year ago

Do I smell another swc opt-out package?😅

JesseKoldewijn commented 1 year ago

Btw, @ryanjduffy you're not on the latest canary release.

JesseKoldewijn commented 1 year ago

Btw, @ryanjduffy you're not on the latest canary release.sorry man, tried to replicate this issue on release 13.2.5-canary.0 and apart from the tooltip being placed kinda weird I dont see any issues.

ryanjduffy commented 1 year ago

Funny. I was when I opened the issue. I'll have to reconfirm later with the original app that surfaced the error. Thanks for the update!

Rhinar commented 1 year ago

I'm experiencing this as well. Do we have a fix?

Happened after I installed react-tooltip. Everything works fine locally but once I push it to vercel I get a crash.

Package.json

{
  "name": "my-super-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "build-stats": "cross-env ANALYZE=true npm run build",
    "export": "next export",
    "build-prod": "run-s clean build export",
    "clean": "rimraf .next out",
    "lint": "next lint",
    "build-types": "tsc --noEmit --pretty",
    "prepare": "husky install",
    "dev2": "NODE_ENV=development node -r ./server/index.js",
    "build2": "NODE_ENV=production next build",
    "start2": "NODE_ENV=production node -r server.js"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.12",
    "@heroicons/react": "^1.0.5",
    "@next/font": "^13.1.2",
    "@stripe/stripe-js": "^1.46.0",
    "@supabase/auth-helpers-nextjs": "^0.5.2",
    "@supabase/auth-helpers-react": "^0.3.1",
    "@supabase/auth-ui-react": "^0.2.6",
    "@supabase/storage-js": "^2.3.0",
    "@supabase/supabase-js": "^2.2.3",
    "@types/express-slow-down": "^1.3.2",
    "axios": "^1.2.2",
    "body-parser": "^1.20.1",
    "cors": "^2.8.5",
    "esm": "^3.2.25",
    "express": "^4.18.2",
    "express-rate-limit": "^6.7.0",
    "express-slow-down": "^1.5.0",
    "framer-motion": "^5.0.0",
    "html2canvas": "^1.4.1",
    "http-proxy-middleware": "^2.0.6",
    "micro": "^10.0.1",
    "next": "^13.1.1",
    "next-seo": "^4.28.1",
    "openai": "^3.1.0",
    "path": "^0.12.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-loading-skeleton": "^3.1.0",
    "react-scroll": "^1.8.4",
    "react-tooltip": "^5.10.0",
    "smooth-scroll": "^16.1.3",
    "strip": "^3.0.0",
    "stripe": "^11.6.0",
    "styled-jsx-plugin-postcss": "^4.0.1",
    "tailwindcss": "^2.2.17",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^12.0.0",
    "@types/node": "^18.11.19",
    "@types/react": "^17.0.33",
    "@typescript-eslint/eslint-plugin": "^4.32.0",
    "@typescript-eslint/parser": "^4.32.0",
    "autoprefixer": "^10.3.7",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-airbnb-typescript": "^14.0.1",
    "eslint-config-next": "^12.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-unused-imports": "^1.1.5",
    "husky": "^7.0.4",
    "lint-staged": "^11.2.5",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.3.11",
    "prettier": "^2.4.1",
    "rimraf": "^3.0.2",
    "tailwindcss": "^2.2.17",
    "typescript": "^4.4.4"
  },
  "license": "ISC"
}
ryanjduffy commented 1 year ago

I retried this tonight with both the original app and the test app linked above with the same result:

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:29 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T8101
    Binaries:
      Node: 16.14.2
      npm: 8.5.0
      Yarn: 1.22.19
      pnpm: 6.11.0
    Relevant packages:
      next: 13.2.5-canary.2
      eslint-config-next: 13.2.3
      react: 18.2.0
      react-dom: 18.2.0
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^13.2.5-canary.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-tooltip": "^5.10.0"
  },
  "devDependencies": {
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.3"
  }
}
kdy1 commented 1 year ago

I'm gonna update swc minifier soon, and I'll check if this issue is fixed by it.

I made https://github.com/vercel/turbo/pull/4175 and once it's merged I can update next-swc

Rhinar commented 1 year ago

Do we have a quick or short term fix? Things are working locally but no dice on prod :/

Bit new to nextjs and vercel, is there a way to manually update swc settings? What is the swc minifier user for? just minifying code?

ryanjduffy commented 1 year ago

@Rhinar setting swcMinify: false will avoid the issue. I expect your js bundles will be a larger but the issue doesn't repro for me at least with that disabled.

kdy1 commented 1 year ago

I verified that this still happens with the new canary

Rhinar commented 1 year ago

Dumb question but where do i set swcMinify: false? I checked node_modules and didn't see that anywhere for react-tooltip I did see other minified configs and set them all to false but no dice.

JesseKoldewijn commented 1 year ago

Dumb question but where do i set swcMinify: false? I checked node_modules and didn't see that anywhere for react-tooltip I did see other minified configs and set them all to false but no dice.

In the next.config.js file

kdy1 commented 1 year ago

This is fixed in canary

image

I did yarn add next@canary and rm -rf .next && yarn build && yarn start

github-actions[bot] commented 1 year ago

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