ref(nextjs): Use bundling instead of proxying to wrap pages and API routes (#6685)

Author: Luca Forstner

packages/nextjs/package.json

@@ -17,8 +17,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@rollup/plugin-sucrase": "4.0.4",
-    "@rollup/plugin-virtual": "3.0.0",
+    "@rollup/plugin-commonjs": "24.0.0",
     "@sentry/core": "7.30.0",
     "@sentry/integrations": "7.30.0",
     "@sentry/node": "7.30.0",

packages/nextjs/rollup.npm.config.js

@@ -14,10 +14,7 @@ export default [
   ),
   ...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/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/proxyLoader.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