[InvalidImageService] error when calling getConfiguredImageService() at build time, but it works fine in dev mode

[syakirurahman]

Astro Info

Astro                    v5.1.2
Node                     v18.19.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/partytown
                         @astrojs/sitemap
                         astro-icon

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

This bug happened in my open-source headless wordpress template https://github.com/devaradise/slickpress, in this file https://github.com/devaradise/slickpress/blob/main/src/lib/node-utils.ts.

I'm trying to programmatically optimize images inside htmlString returned from wordpress posts by using getImage function from astro:assets. It works fine in dev mode, but when i tested to build, this error happened. I did initial investigation, and found out that getConfiguredImageService that is called inside getImage function return [InvalidImageService] service error.

Here is the stacktrace:

InvalidImageService: There was an error loading the configured image service. Please see the stack trace for more information.
    at eval (/Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/assets/internal.js:25:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getConfiguredImageService (/Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/assets/internal.js:21:34)
    at async optimizeImagesInsideHtmlString (/Volumes/Work/Devaradise/headlesswp/slickpress-lite/src/lib/node-utils.ts:12:26)
    at async Object.load (/Volumes/Work/Devaradise/headlesswp/slickpress-lite/src/lib/wp-loader.ts:64:36)
    at async Promise.all (index 0)
    at async #doSync (file:///Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/content/content-layer.js:152:5)
    at async file:///Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected]/node_modules/p-queue/dist/index.js:187:36 {
  loc: undefined,
  title: 'Error while loading image service.',
  hint: undefined,
  frame: undefined,
  type: 'AstroError',
  cause: Error: Vite module runner has been closed.
      at SSRCompatModuleRunner.getModuleInformation (file:///Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/module-runner.js:1196:13)
      at SSRCompatModuleRunner.cachedModule (file:///Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/module-runner.js:1186:21)
      at request (file:///Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/module-runner.js:1222:99)
      at dynamicRequest (file:///Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/module-runner.js:1224:124)
      at getConfiguredImageService (/Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/assets/internal.js:21:40)
      at optimizeImagesInsideHtmlString (/Volumes/Work/Devaradise/headlesswp/slickpress-lite/src/lib/node-utils.ts:12:83)
      at Object.load (/Volumes/Work/Devaradise/headlesswp/slickpress-lite/src/lib/wp-loader.ts:64:98)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Promise.all (index 0)
      at async #doSync (file:///Volumes/Work/Devaradise/headlesswp/slickpress-lite/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/content/content-layer.js:152:5)
}

I'm using passthrough image service, but the the default image service also return the same error at build time.

What's the expected result?

Same behavior between build and dev mode.

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/devaradise/slickpress

Edit

The image service in reproduction example seems not working entirely. But, since this is from open source project, all codes are publicly accessible and it has live demo here https://slickpress.headlesswp.io/.

It deployed to cloudflare pages. The live demo works fine because i handled the error from getConfiguredImageService and serve the original images instead. The post main images optimization is working fine because it use Astro <Image /> component directly.

Participation

• I am willing to submit a pull request for this issue.

[ascorbic]

I'm closing this as it's a duplicate of #12689. I would recommend looking at how we handle images from markdown files in the glob loader though, as that's likely to be a better approach to image processing

[syakirurahman]

Thank you @ascorbic

[syakirurahman]

@ascorbic could you please share the reference to the image handling from markdown files