fix(nextjs): Make Next.js types isomorphic

packages/nextjs/package.json

@@ -9,16 +9,15 @@
   "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"
   },
   "dependencies": {
-    "@rollup/plugin-sucrase": "4.0.4",
-    "@rollup/plugin-virtual": "3.0.0",
+    "@rollup/plugin-commonjs": "24.0.0",
     "@sentry/core": "7.29.0",
     "@sentry/integrations": "7.29.0",
     "@sentry/node": "7.29.0",
@@ -57,7 +56,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,19 +5,16 @@ 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'],
 
       // 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(
     makeBaseNPMConfig({
-      entrypoints: [
-        'src/config/templates/pageProxyLoaderTemplate.ts',
-        'src/config/templates/apiProxyLoaderTemplate.ts',
-      ],
+      entrypoints: ['src/config/templates/pageWrapperTemplate.ts', 'src/config/templates/apiWrapperTemplate.ts'],
 
       packageSpecificConfig: {
         output: {
@@ -32,15 +29,13 @@ export default [
           // make it so Rollup calms down about the fact that we're combining default and named exports
           exports: 'named',
         },
-        external: ['@sentry/nextjs', '__RESOURCE_PATH__'],
+        external: ['@sentry/nextjs', '__SENTRY_WRAPPING_TARGET__'],
       },
     }),
   ),
   ...makeNPMConfigVariants(
     makeBaseNPMConfig({
       entrypoints: ['src/config/loaders/index.ts'],
-      // Needed in order to successfully import sucrase
-      esModuleInterop: true,
 
       packageSpecificConfig: {
         output: {
@@ -50,7 +45,7 @@ export default [
           // make it so Rollup calms down about the fact that we're combining default and named exports
           exports: 'named',
         },
-        external: ['@rollup/plugin-sucrase', 'rollup'],
+        external: ['@rollup/plugin-commonjs', 'rollup'],
       },
     }),
   ),

packages/nextjs/src/index.client.ts → 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/utils/tunnelRoute.ts → packages/nextjs/src/client/tunnelRoute.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/config/index.ts

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

packages/nextjs/src/config/loaders/index.ts

@@ -1,3 +1,3 @@
 export { default as valueInjectionLoader } from './valueInjectionLoader';
 export { default as prefixLoader } from './prefixLoader';
-export { default as proxyLoader } from './proxyLoader';
+export { default as wrappingLoader } from './wrappingLoader';

packages/nextjs/src/config/loaders/types.ts

@@ -1,3 +1,5 @@
+import type webpack from 'webpack';
+
 export type LoaderThis<Options> = {
   /** Path to the file being loaded */
   resourcePath: string;
@@ -7,6 +9,12 @@ export type LoaderThis<Options> = {
 
   // Function to add outside file used by loader to `watch` process
   addDependency: (filepath: string) => void;
+
+  // Marks a loader as asynchronous
+  async: webpack.loader.LoaderContext['async'];
+
+  // Return errors, code, and sourcemaps from an asynchronous loader
+  callback: webpack.loader.LoaderContext['callback'];
 } & (
   | {
       // Loader options in Webpack 4