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

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)

@eggplants

@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.

$ 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
 ...

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

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

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

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

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);

ref(nextjs): Use virtual rather than temporary file for proxy module (#…

Navigation Menu

Repository navigation

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

Discussed in #5943

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

	// 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);

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

Description

Discussed in #5943

Activity

AbhiPrasad commented on Oct 13, 2022

eggplants commented on Oct 13, 2022

eggplants commented on Oct 13, 2022

AbhiPrasad commented on Oct 13, 2022

eggplants commented on Oct 13, 2022

AbhiPrasad commented on Oct 13, 2022

eggplants commented on Oct 13, 2022

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions

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