NextJS: Edge runtime imports index.client.js in development

[isaacseymour]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

7.53.1

Framework Version

NextJS 13.4.3

Link to Sentry event

No response

SDK Setup

sentry.edge.config.js:

import * as Sentry from '@sentry/nextjs';

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN,
  environment: process.env.APP_ENV || "development",
  release: process.env.VERCEL_GIT_COMMIT_SHA,
  tracesSampleRate: 0.0,
  initialScope: {
    tags: {
      vercel_env: process.env.NEXT_PUBLIC_VERCEL_ENV,
      deployment_url: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`,
    },
  }
});

Steps to Reproduce

Create a NextJS app. In next.config.js, set sentry.excludeServerRoutes to /.*/ and manually wrap the server component (to work around #8062).

Make a page that's rendered on the edge runtime, manually wrapped (also working around #8062!). E.g.:

// page.jsx
import { wrapServerComponentWithSentry } from "@sentry/nextjs";

export const runtime = "edge";

async function Page() {
  return <div>Hello!</div>;
}

export default wrapServerComponentWithSentry(Page, {
  componentRoute: "/",
  componentType: "Page",
});

Run next dev.

Expected Result

Page should render "Hello!"

Actual Result

[isaacseymour]

Workaround

Adding this to next.config.js seems to sort things out:

webpack: (config, options) => {
  if (options.isServer && options.nextRuntime === "edge") {
    config.resolve.alias["@sentry/nextjs"] = path.resolve("./node_modules/@sentry/nextjs/esm/edge")
  }

  return config;
},

Suggested solution

I think the issue here is that the package.json for @sentry/nextjs has module and browser keys, but no worker key. Based on this discussion, it seems like the recommendation is for libraries to have "worker": "... edge version here ..."

So for Sentry that would be "worker": "esm/edge/index.js".

[lforst]

@isaacseymour I sadly cannot reproduce the error with the steps you provide. Can you please share the full error, your next.config.js, and a minimal reproduction example? Thanks!

[isaacseymour]

Hmm, I also can't repro it in a fresh repo. There must be some interaction with another bit of config somewhere, but I can't think what :(