search

getsentry / sentry-javascript

Official Sentry SDKs for JavaScript
https://sentry.io
MIT License
7.87k stars 1.55k forks source link

Next.js build failing when intializing sentry through the sentry sdk wizard for next.js `hoist-non-react-statics` #13283

Closed dwolrdcojp closed 1 month ago

dwolrdcojp commented 1 month ago

Environment

SaaS (https://sentry.io/)

What are you trying to accomplish?

I used the Sentry SDK wizard to install Sentry for our Next.js application.

npx @sentry/wizard@latest -i nextjs

After following all the steps and it seemed to be working in development, when running npm run build for Next.js application the build step would fail because it couldn't resolve package hoist-non-react-statics

I'm not sure why this dependency needs to be installed manually in order for the build to succeed... and why it wasn't a dependency for the npm package. "@sentry/nextjs": "^8.24.0",

How are you getting stuck?

Build step failing in CI log

Run npm ci
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm warn deprecated osenv@0.1.5: This package is no longer supported.
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.1.7: Glob versions prior to v9 are no longer supported
npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead
npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm warn deprecated @babel/plugin-proposal-optional-catch-binding@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-logical-assignment-operators@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead.
npm warn deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated @babel/plugin-proposal-async-generator-functions@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.1.6: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.1.6: Glob versions prior to v9 are no longer supported

> prepare
> husky || true

HUSKY=0 skip install
added 2341 packages, and audited 2547 packages in 1m

326 packages are looking for funding
  run `npm fund` for details

3 vulnerabilities (1 moderate, 2 high)

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

> @powers/utils@1.0.0 build
> tsc

> next@0.1.0 build
> prisma generate && NODE_ENV=production next build

Prisma schema loaded from prisma/schema.prisma

✔ Generated Prisma Client (v5.18.0) to ./../node_modules/@prisma/client in 296ms

Start by importing your Prisma Client (See: http://pris.ly/d/importing-client)

Tip: Interested in query caching in just a few lines of code? Try Accelerate today! https://pris.ly/tip-3-accelerate

⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

  ▲ Next.js 14.2.5
  - Experiments (use with caution):
    · instrumentationHook

   Creating an optimized production build ...
[@sentry/nextjs - Node.js] Warning: No auth token provided. Will not create release. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[@sentry/nextjs - Node.js] Warning: No auth token provided. Will not upload source maps. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[@sentry/nextjs - Node.js] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[@sentry/nextjs - Edge] Warning: No auth token provided. Will not create release. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[@sentry/nextjs - Edge] Warning: No auth token provided. Will not upload source maps. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[@sentry/nextjs - Edge] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[@sentry/nextjs - Client] Warning: No auth token provided. Will not create release. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[@sentry/nextjs - Client] Warning: No auth token provided. Will not upload source maps. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[@sentry/nextjs - Client] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
Failed to compile.

../node_modules/@sentry/react/build/esm/errorboundary.js:3:1
Module not found: Can't resolve 'hoist-non-react-statics'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../node_modules/@sentry/react/build/esm/index.js
./node_modules/@sentry/nextjs/build/esm/index.client.js
./app/global-error.tsx

../node_modules/@sentry/react/build/esm/profiler.js:4:1
Module not found: Can't resolve 'hoist-non-react-statics'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../node_modules/@sentry/react/build/esm/index.js
./node_modules/@sentry/nextjs/build/esm/index.client.js
./app/global-error.tsx

../node_modules/@sentry/react/build/esm/reactrouter.js:3:1
Module not found: Can't resolve 'hoist-non-react-statics'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../node_modules/@sentry/react/build/esm/index.js
./node_modules/@sentry/nextjs/build/esm/index.client.js
./app/global-error.tsx

../node_modules/@sentry/react/build/esm/reactrouterv6.js:4:1
Module not found: Can't resolve 'hoist-non-react-statics'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../node_modules/@sentry/react/build/esm/index.js
./node_modules/@sentry/nextjs/build/esm/index.client.js
./app/global-error.tsx

../node_modules/@sentry/react/build/esm/errorboundary.js:3:1
Module not found: Can't resolve 'hoist-non-react-statics'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../node_modules/@sentry/react/build/esm/index.js
./node_modules/@sentry/nextjs/build/esm/index.client.js
./sentry.client.config.ts

> Build failed because of webpack errors
npm error Lifecycle script `build` failed with error:
npm error code 1
npm error path /home/runner/work/powers/powers/next
npm error workspace next@0.1.0
npm error location /home/runner/work/powers/powers/next
npm error command failed
npm error command sh -c prisma generate && NODE_ENV=production next build

We're using a monorepo with npm workspaces

root monorepo dir package.json

{
  "name": "monorepo",
  "private": true,
  "workspaces": [
    "next",
    "native",
    "packages/utils",
    "server/integration-tests"
  ],
  "devDependencies": {
    "husky": "^9.0.11",
    "@playwright/test": "^1.45.2",
    "lint-staged": "^15.2.2"
  },
  "scripts": {
    "load-prod-data": "bash ./load_prod_database.sh",
    "prepare": "husky || true"
  },
  "lint-staged": {
    "*.{js,jsx,json,ts,tsx,md,html,css,yml,yaml}": "prettier --write"
  }
}

root_dir/next package.json


{
  "name": "next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "type-check": "tsc --noEmit",
    "dev": "prisma generate && next dev",
    "build": "prisma generate && NODE_ENV=production next build",
    "start": "next start",
    "lint": "next lint",
    "prettier": "prettier --write .",
    "postinstall": "prisma generate",
    "test": "playwright test --project=chromium --project=firefox --project=edge",
    "test-chromium": "playwright test --project=chromium",
    "test-firefox": "playwright test --project=firefox",
    "test-edge": "playwright test --project=edge",
    "test-arch": "playwright test --project=chromium --project=firefox",
    "test-ui": "playwright test --ui",
    "reset": "npx prisma migrate reset -f",
    "seed": "npx prisma db seed",
    "migrate": "npx prisma migrate deploy"
  },
  "prisma": {
    "seed": "ts-node --transpile-only --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.0",
    "@next/env": "^14.2.5",
    "@next/eslint-plugin-next": "^13.4.19",
    "@powers/utils": "*",
    "@prisma/client": "^5.9.1",
    "@radix-ui/react-accessible-icon": "^1.0.3",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-collapsible": "^1.1.0",
    "@radix-ui/react-context-menu": "^2.2.1",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-hover-card": "^1.1.1",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.1",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.0",
    "@radix-ui/react-scroll-area": "^1.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.2",
    "@react-email/components": "0.0.21",
    "@react-email/tailwind": "0.0.18",
    "@sentry/nextjs": "^8.24.0",
    "@swc/helpers": "^0.5.12",
    "@tanstack/react-table": "^8.19.3",
    "@tanstack/table-core": "^8.19.3",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.1",
    "core-js": "^3.37.1",
    "date-fns": "^3.6.0",
    "date-fns-tz": "^3.1.3",
    "dotenv": "^16.4.5",
    "embla-carousel-react": "^8.1.7",
    "eslint-config-next": "13.4.19",
    "flowbite-react": "^0.6.4",
    "form-data": "^4.0.0",
    "input-otp": "^1.2.4",
    "lucide-react": "^0.417.0",
    "mobx": "^6.12.4",
    "next": "^14.2.5",
    "next-themes": "^0.2.1",
    "npm": "^10.8.2",
    "postcss": "^8.4.33",
    "react": "^18.3.1",
    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
    "react-dropzone": "^14.2.3",
    "react-email": "^2.1.6-canary.0",
    "react-hook-form": "^7.52.1",
    "react-resizable-panels": "^2.0.22",
    "recharts": "^2.12.7",
    "redoc": "^2.1.5",
    "resend": "^3.2.0",
    "shadcn-ui": "^0.8.0",
    "sharp": "^0.33.4",
    "sonner": "^1.5.0",
    "styled-components": "^6.1.11",
    "styled-jsx": "^5.1.6",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.7",
    "use-debounce": "^10.0.0",
    "vaul": "^0.9.1",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@faker-js/faker": "^8.3.1",
    "@playwright/test": "^1.45.2",
    "@swc/helpers": "^0.5.12",
    "@types/node": "^20.14.10",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^6.11.0",
    "@typescript-eslint/parser": "^6.11.0",
    "@vercel/analytics": "^1.2.2",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react": "^7.33.2",
    "js-yaml": "^4.1.0",
    "prettier": "^3.3.3",
    "prisma": "^5.9.1",
    "ts-node": "^10.9.2",
    "typescript": "latest",
    "yaml-loader": "^0.8.1"
  }
}

After adding ' "hoist-non-react-statics": "^3.3.2",` to dependencies the build will succeed

Using Next.js 14.2.5

Where in the product are you?

Unknown

Link

No response

DSN

No response

Version

No response

getsantry[bot] commented 1 month ago

Assigning to @getsentry/support for routing ⏲️

andreiborza commented 1 month ago

Hello, this doesn't seem to be an issue outside of a monorepo when creating a fresh nextjs app and using our wizard. Could you please provide a reproduction repo or a stackblitz?

dwolrdcojp commented 1 month ago

Hello, this doesn't seem to be an issue outside of a monorepo when creating a fresh nextjs app and using our wizard. Could you please provide a reproduction repo or a stackblitz?

While I was working on creating a reproduction repo this error disappeared. I removed node_modules and package-lock.json from all the repos in the monorepo and did a fresh npm install and now it's building correctly without the need for that package in next project. Thanks.