Unpack Next.js cache dir or provide an option to choose the dir

[kirill-konshin]

A follow up for #2 (comment)

Prod run emits errors:

 ⨯ Failed to write image to cache 24-d7GMv9Put-b8LiQHcADsQ3iL099cDsuFLFsgj0LE Error: ENOTDIR: not a directory, mkdir '/x/demo/dist/mac-arm64/Next Electron RSC.app/Contents/Resources/app.asar/.next/standalone/demo/.next/cache/images/24-d7GMv9Put-b8LiQHcADsQ3iL099cDsuFLFsgj0LE'
    at async writeToCacheDir (/x/demo/dist/mac-arm64/Next Electron RSC.app/Contents/Resources/app.asar/.next/standalone/demo/node_modules/next/dist/server/image-optimizer.js:213:5)
    at async ImageOptimizerCache.set (/x/demo/dist/mac-arm64/Next Electron RSC.app/Contents/Resources/app.asar/.next/standalone/demo/node_modules/next/dist/server/image-optimizer.js:507:13)
    at async (/x/demo/dist/mac-arm64/Next Electron RSC.app/Contents/Resources/app.asar/.next/standalone/demo/node_modules/next/dist/server/response-cache/index.js:128:25)
    at async (/x/demo/dist/mac-arm64/Next Electron RSC.app/Contents/Resources/app.asar/.next/standalone/demo/node_modules/next/dist/lib/batcher.js:45:32) {
  errno: -20,
  code: 'ENOTDIR',
  syscall: 'mkdir',
  path: '/x/demo/dist/mac-arm64/Next Electron RSC.app/Contents/Resources/app.asar/.next/standalone/demo/.next/cache/images/24-d7GMv9Put-b8LiQHcADsQ3iL099cDsuFLFsgj0LE'
}

There seems to be a bug in asarUnpack: electron-userland/electron-builder#7264

The following does not work in demo:

asarUnpack:
  - '.next/standalone/demo/.next/cache/**/*'

  ⨯ /x/lib/.tscache/cache must be under /x/demo/  failedTask=build stackTrace=Error: /x/lib/.tscache/cache must be under /x/demo/
    at getRelativePath (/x/demo/node_modules/app-builder-lib/src/util/filter.ts:32:13)
    at AsarPackager.unpackPattern (/x/demo/node_modules/app-builder-lib/src/util/filter.ts:57:22)
    at AsarPackager.createPackageFromFiles (/x/demo/node_modules/app-builder-lib/src/asar/asarUtil.ts:129:82)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at AsarPackager.pack (/x/demo/node_modules/app-builder-lib/src/asar/asarUtil.ts:49:41)
    at /x/demo/node_modules/app-builder-lib/src/platformPackager.ts:439:11
    at async Promise.all (index 0)
    at AsyncTaskManager.awaitTasks (/x/demo/node_modules/builder-util/src/asyncTaskManager.ts:65:25)
    at MacPackager.doPack (/x/demo/node_modules/app-builder-lib/src/platformPackager.ts:293:5)
    at MacPackager.pack (/x/demo/node_modules/app-builder-lib/src/macPackager.ts:215:9)
    at Packager.doBuild (/x/demo/node_modules/app-builder-lib/src/packager.ts:459:9)
    at executeFinally (/x/demo/node_modules/builder-util/src/promise.ts:12:14)
    at Packager.build (/x/demo/node_modules/app-builder-lib/src/packager.ts:393:31)
    at executeFinally (/x/demo/node_modules/builder-util/src/promise.ts:12:14)

Next.js does not seem to provide cacheDir setting: https://github.com/vercel/next.js/blob/canary/packages/next/src/server/image-optimizer.ts#L372

Created vercel/next.js#72416

[kirill-konshin]

@jamcalli for now I conclude that best option is to disable ASAR until either Next.js or Electron Builder fixes the issue...

Alternatively you can try to opt out of ASAR just the cache dir:

asarUnpack:
  - '.next/standalone/demo/.next/cache/**/*'

It fails in demo due to monorepo, but in your case it might work, just copy there something before the packaging, so the dir will be created.

Made it work for monorepo, does not fix the problem... Electron still tries to write in ASAR instead of the unpacked dir.

[jamcalli]

@kirill-konshin thanks for looking into this.

It honestly isn't a big deal, and its probably totally ok to just opt out of image optimization caching, at least for my use case.

I appreciate your suggestions, and documenting the nuances will be beneficial for anyone encountering similar situation.

[jamcalli]

@jamcalli for now I conclude that best option is to disable ASAR until either Next.js or Electron Builder fixes the issue...

Alternatively you can try to opt out of ASAR just the cache dir:

asarUnpack:
  - '.next/standalone/demo/.next/cache/**/*'

It fails in demo due to monorepo, but in your case it might work, just copy there something before the packaging, so the dir will be created.

Made it work for monorepo, does not fix the problem... Electron still tries to write in ASAR instead of the unpacked dir.

A true solution would be for next to allows specifying the cache dir. There are some tickets open regarding this, but obviously the use case is so niche that I cant see them working on it anytime soon.

[kirill-konshin]

Btw, you can safely disable ASAR: it provides minimal security, primarily through obscurity. While it does package files into a single archive, the contents can be easily extracted, meaning it doesn’t actually encrypt or truly protect the files. This “security” mainly prevents casual users from easily browsing or modifying the app’s code but does little to deter a determined attacker.

asar: false

No issues with cache ;)

[jamcalli]

This is true.

asar just reduces the bundle size considerably (in my case almost 50% smaller), so it is ideal to use it.