fix(nextjs): Make Next.js types isomorphic (#6707)

Author: Luca Forstner

.size-limit.js

@@ -46,7 +46,7 @@ module.exports = [
   },
   {
     name: '@sentry/nextjs Client - Webpack (gzipped + minified)',
-    path: 'packages/nextjs/build/esm/index.client.js',
+    path: 'packages/nextjs/build/esm/client/index.js',
     import: '{ init }',
     gzip: true,
     limit: '57 KB',

packages/nextjs/package.json

@@ -9,10 +9,10 @@
   "engines": {
     "node": ">=8"
   },
-  "main": "build/cjs/index.server.js",
-  "module": "build/esm/index.server.js",
-  "browser": "build/esm/index.client.js",
-  "types": "build/types/index.server.d.ts",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "browser": "build/esm/client/index.js",
+  "types": "build/types/index.types.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,6 @@
     "tslib": "^1.9.3"
   },
   "devDependencies": {
-    "@sentry/nextjs": "7.30.0",
     "@types/webpack": "^4.41.31",
     "eslint-plugin-react": "^7.31.11",
     "next": "10.1.3"
@@ -56,7 +55,7 @@
     "build:rollup:watch": "nodemon --ext ts --watch src scripts/buildRollup.ts",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "build:npm": "ts-node ../../scripts/prepack.ts && npm pack ./build",
-    "circularDepCheck": "madge --circular src/index.client.ts && madge --circular --exclude 'config/types\\.ts' src/index.server.ts # see https://github.com/pahen/madge/issues/306",
+    "circularDepCheck": "madge --circular src/index.ts && madge --circular src/client/index.ts && madge --circular src/index.types.ts",
     "clean": "rimraf build coverage sentry-nextjs-*.tgz",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",

packages/nextjs/rollup.npm.config.js

@@ -5,11 +5,11 @@ export default [
     makeBaseNPMConfig({
       // We need to include `instrumentServer.ts` separately because it's only conditionally required, and so rollup
       // doesn't automatically include it when calculating the module dependency tree.
-      entrypoints: ['src/index.server.ts', 'src/index.client.ts', 'src/config/webpack.ts'],
+      entrypoints: ['src/index.ts', 'src/client/index.ts', 'src/config/webpack.ts'],
 
       // prevent this internal nextjs code from ending up in our built package (this doesn't happen automatially because
       // the name doesn't match an SDK dependency)
-      packageSpecificConfig: { external: ['next/router'] },
+      packageSpecificConfig: { external: ['next/router', 'next/constants'] },
     }),
   ),
   ...makeNPMConfigVariants(

packages/nextjs/src/index.client.ts renamed to packages/nextjs/src/client/index.ts

@@ -1,17 +1,16 @@
 import { RewriteFrames } from '@sentry/integrations';
-import { configureScope, init as reactInit, Integrations } from '@sentry/react';
+import { BrowserOptions, configureScope, init as reactInit, Integrations } from '@sentry/react';
 import { BrowserTracing, defaultRequestInstrumentationOptions, hasTracingEnabled } from '@sentry/tracing';
 import { EventProcessor } from '@sentry/types';
 
-import { nextRouterInstrumentation } from './performance/client';
-import { buildMetadata } from './utils/metadata';
-import { NextjsOptions } from './utils/nextjsOptions';
-import { applyTunnelRouteOption } from './utils/tunnelRoute';
-import { addOrUpdateIntegration } from './utils/userIntegrations';
+import { buildMetadata } from '../common/metadata';
+import { addOrUpdateIntegration } from '../common/userIntegrations';
+import { nextRouterInstrumentation } from './performance';
+import { applyTunnelRouteOption } from './tunnelRoute';
 
 export * from '@sentry/react';
-export { nextRouterInstrumentation } from './performance/client';
-export { captureUnderscoreErrorException } from './utils/_error';
+export { nextRouterInstrumentation } from './performance';
+export { captureUnderscoreErrorException } from '../common/_error';
 
 export { Integrations };
 
@@ -35,7 +34,7 @@ const globalWithInjectedValues = global as typeof global & {
 };
 
 /** Inits the Sentry NextJS SDK on the browser with the React SDK. */
-export function init(options: NextjsOptions): void {
+export function init(options: BrowserOptions): void {
   applyTunnelRouteOption(options);
   buildMetadata(options, ['nextjs', 'react']);
   options.environment = options.environment || process.env.NODE_ENV;
@@ -52,7 +51,7 @@ export function init(options: NextjsOptions): void {
   });
 }
 
-function addClientIntegrations(options: NextjsOptions): void {
+function addClientIntegrations(options: BrowserOptions): void {
   let integrations = options.integrations || [];
 
   // This value is injected at build time, based on the output directory specified in the build config. Though a default

packages/nextjs/src/performance/client.ts renamed to packages/nextjs/src/client/performance.ts

@@ -1,15 +1,14 @@
+import { BrowserOptions } from '@sentry/react';
 import { dsnFromString, logger } from '@sentry/utils';
 
-import { NextjsOptions } from './nextjsOptions';
-
 const globalWithInjectedValues = global as typeof global & {
   __sentryRewritesTunnelPath__?: string;
 };
 
 /**
  * Applies the `tunnel` option to the Next.js SDK options based on `withSentryConfig`'s `tunnelRoute` option.
  */
-export function applyTunnelRouteOption(options: NextjsOptions): void {
+export function applyTunnelRouteOption(options: BrowserOptions): void {
   const tunnelRouteOption = globalWithInjectedValues.__sentryRewritesTunnelPath__;
   if (tunnelRouteOption && options.dsn) {
     const dsnComponents = dsnFromString(options.dsn);

packages/nextjs/src/utils/tunnelRoute.ts renamed to packages/nextjs/src/client/tunnelRoute.ts

@@ -0,0 +1,2 @@
+export type { SentryWebpackPluginOptions } from './types';
+export { withSentryConfig } from './withSentryConfig';