Find approach that doesn't write to disk in Next.js SDK `proxyLoader`

[AbhiPrasad]

Discussed in #5943

^{Originally posted by eggplants October 13, 2022}
proxyLoader creates src/pages/temp***.js. It causes the following error in my nextjs project on Docker:

ModuleBuildError: Module build failed (from ./node_modules/@sentry/nextjs/cjs/config/loaders/proxyLoader.js):
Error: EROFS: read-only file system, open '/app/src/pages/temp0.5575603336148998.js'
    at Object.openSync (node:fs:585:3)
    at Object.writeFileSync (node:fs:2170:35)
    at Object.proxyLoader (/app/node_modules/@sentry/nextjs/cjs/config/loaders/proxyLoader.js:68:17)

Current only workaround is to set autoInstrumentServerFunctions: false. Is there any other way?

(@sentry/nextjs: 7.15.0, next: 12.3.1)

[AbhiPrasad]

@eggplants Could you provide your Node/Webpack versions as well here?

I wonder why /app/src/pages is readonly, is this something you configured with docker?

Currently there is no other workaround for this other than disabling autoInstrumentServerFunctions, but we are going to take a look!

Perhaps we need to investigate using a virtual plugin, or using the /tmp/ directory here.

[eggplants]

$ node --version
v16.13.0

I wonder why /app/src/pages is readonly, is this something you configured with docker?

Yes. Here is a part of my docker-compose.yaml.

version: '3.6'

services:
...
  nextjs:
    build:
      context: ./
      dockerfile: ./Dockerfile
    image: foo-bar-nextjs
    volumes:
      - ./src:/app/src:ro
 ...

[eggplants]

To set autoInstrumentServerFunctions to true while keeping the volume read-only, is new option like disableProxyLoader needed?

[AbhiPrasad]

autoInstrumentServerFunctions uses the proxy loader, so if the proxy loader was not installed it would not do anything.

[eggplants]

So I have to either give up on making volume read-only or using autoInstrumentServerFunctions, right?

[AbhiPrasad]

Yes for now, but we can look at improving this. PRs are also welcome if you have any ideas.

[eggplants]

If we can get the rollup to do it without temporary files, this issue might solve the problem.

sentry-javascript/packages/nextjs/src/config/loaders/proxyLoader.ts

Lines 53 to 71 in 7e03836

	// Inject the route 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.
	let proxyCode = await rollupize(tempFilePath, this.resourcePath);
	fs.unlinkSync(tempFilePath);