use virtual instead of temporary file for proxy module code

Author: lobsterkatie

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

@@ -50,34 +50,21 @@ export default async function proxyLoader(this: LoaderThis<LoaderOptions>, userC
   // Make sure the template is included when runing `webpack watch`
   this.addDependency(templatePath);
 
-  // Inject the route into the template
+  // Inject the route and the path to the file we're wrapping into the template
   templateCode = templateCode.replace(/__ROUTE__/g, parameterizedRoute);
-
-  // Fill in the path to the file we're wrapping and save the result as a temporary file in the same folder (so that
-  // relative imports and exports are calculated correctly).
-  //
-  // TODO: We're saving the filled-in template to disk, however temporarily, because Rollup expects a path to a code
-  // file, not code itself. There is a rollup plugin which can fake this (`@rollup/plugin-virtual`) but the virtual file
-  // seems to be inside of a virtual directory (in other words, one level down from where you'd expect it) and that
-  // messes up relative imports and exports. Presumably there's a way to make it work, though, and if we can, it would
-  // be cleaner than having to first write and then delete a temporary file each time we run this loader.
   templateCode = templateCode.replace(/__RESOURCE_PATH__/g, this.resourcePath);
-  const tempFilePath = path.resolve(path.dirname(this.resourcePath), `temp${Math.random()}.js`);
-  fs.writeFileSync(tempFilePath, templateCode);
 
   // Run the proxy module code through Rollup, in order to split the `export * from '<wrapped file>'` out into
-  // individual exports (which nextjs seems to require), then delete the tempoary file.
+  // individual exports (which nextjs seems to require).
   let proxyCode;
   try {
-    proxyCode = await rollupize(tempFilePath, this.resourcePath);
+    proxyCode = await rollupize(templateCode, this.resourcePath);
   } catch (err) {
     __DEBUG_BUILD__ &&
       logger.warn(
         `Could not wrap ${this.resourcePath}. An error occurred while processing the proxy module template:\n${err}`,
       );
     return userCode;
-  } finally {
-    fs.unlinkSync(tempFilePath);
   }
 
   // Add a query string onto all references to the wrapped file, so that webpack will consider it different from the

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

@@ -1,12 +1,19 @@
 import sucrase from '@rollup/plugin-sucrase';
+import virtual from '@rollup/plugin-virtual';
 import * as path from 'path';
 import type { InputOptions as RollupInputOptions, OutputOptions as RollupOutputOptions } from 'rollup';
 import { rollup } from 'rollup';
 
-const getRollupInputOptions = (proxyPath: string, userModulePath: string): RollupInputOptions => ({
-  input: proxyPath,
+const SENTRY_PROXY_MODULE_NAME = 'sentry-proxy-module';
+
+const getRollupInputOptions = (templateCode: string, userModulePath: string): RollupInputOptions => ({
+  input: SENTRY_PROXY_MODULE_NAME,
 
   plugins: [
+    virtual({
+      [SENTRY_PROXY_MODULE_NAME]: templateCode,
+    }),
+
     sucrase({
       transforms: ['jsx', 'typescript'],
     }),
@@ -17,7 +24,7 @@ const getRollupInputOptions = (proxyPath: string, userModulePath: string): Rollu
   // otherwise they won't be processed. (We need Rollup to process the former so that we can use the code, and we need
   // it to process the latter so it knows what exports to re-export from the proxy module.) Past that, we don't care, so
   // don't bother to process anything else.
-  external: importPath => importPath !== proxyPath && importPath !== userModulePath,
+  external: importPath => importPath !== SENTRY_PROXY_MODULE_NAME && importPath !== userModulePath,
 
   // Prevent rollup from stressing out about TS's use of global `this` when polyfilling await. (TS will polyfill if the
   // user's tsconfig `target` is set to anything before `es2017`. See https://stackoverflow.com/a/72822340 and
@@ -53,17 +60,17 @@ const rollupOutputOptions: RollupOutputOptions = {
 };
 
 /**
- * Use Rollup to process the proxy module file (located at `tempProxyFilePath`) in order to split its `export * from
- * '<wrapped file>'` call into individual exports (which nextjs seems to need).
+ * Use Rollup to process the proxy module code, in order to split its `export * from '<wrapped file>'` call into
+ * individual exports (which nextjs seems to need).
  *
  * Note: Any errors which occur are handled by the proxy loader which calls this function.
  *
- * @param tempProxyFilePath The path to the temporary file containing the proxy module code
+ * @param templateCode The proxy module code
  * @param userModulePath The path to the file being wrapped
  * @returns The processed proxy module code
  */
-export async function rollupize(tempProxyFilePath: string, userModulePath: string): Promise<string> {
-  const intermediateBundle = await rollup(getRollupInputOptions(tempProxyFilePath, userModulePath));
+export async function rollupize(templateCode: string, userModulePath: string): Promise<string> {
+  const intermediateBundle = await rollup(getRollupInputOptions(templateCode, userModulePath));
   const finalBundle = await intermediateBundle.generate(rollupOutputOptions);
 
   // The module at index 0 is always the entrypoint, which in this case is the proxy module.