Astro dev server crashing

[ishanAhuja]

I'm getting the following error message: node_modules/astro-imagetools/utils/runtimeChecks.js:9:21: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

Using astro 1.2.7 and astro-imagetools 0.6.11.

I'm using the Picture component in an astro component as follows:

  <Picture
    src={`/src/assets/images/how-it-works/${howItWorksItem.key}/graphic.png`}
    alt={howItWorksItem.title}
  />

Any help with this will be greatly appreciated 😊

[RafidMuhymin]

Hi 👋 @ishanAhuja ! Can you share a reproduction using https://astro.new/ ?

[kaushalyap]

@RafidMuhymin Also the same version getting following when importing astroImageTools in astro.config.mjs

Module '"astro-imagetools"' has no exported member 'astroImageTools'.

[SuddenDev]

Unfortunately I also have the issue. It started when i deleted the node-modules directory and reinstalled the dependecies.

...
    "astro": "^1.5.2",
    "astro-imagetools": "^0.6.11",
...

This is the error message that I get, but there's a ton of errors with the same message regarding the await.

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/astro-imagetools/utils/runtimeChecks.js:9:21:
      9 │ export const sharp = await (async () => {

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/astro-imagetools/utils/runtimeChecks.js:39:19:
      39 │ const configFile = await findUp([

...

Interestingly enough, the build works and exports the right images. I'll maybe try to just pull my repo new again. Maybe that helps..

Btw, I'm also using vue with astro.

[SuddenDev]

okay, just a quick update: Deleting my files and pulling a fresh copy of my repo did not fix it. What "fixed" it for me was to comment out the package in all files where used and starting the dev server. After that I started enabling the files / lines again and it still works. Definitely an odd bug. If I had to guess I'd say it maybe has to do with the cache? But that's just a shot in the dark tbh.

Edit:

For me I found the issue: I was trying to use the renderImg API in a vue component. Although that works, it only does when the component is only rendered during the build process and not when using the client:load directive. I didn't include it anywhere, but the vite auto-importer probably pulled it into it's cache. I now deleted it and it works again.

[amxmln]

I’m running into this as well. Similar issue to @SuddenDev, if I have renderImg in a Vue-Component and try starting the Dev-Server, it errors out (even without client:load). Starting the server and then adding the component back works, so does building the project.

Edit: Adding the following to astro.config.mjs seems to help for the time being:

{
  …
  vite: {
    optimizeDeps: {
      exclude: ['astro-imagetools'],
    }
  }
  …
}

[amxmln]

Update: this workaround doesn’t work if you want to hydrate a component that contains a Vue-Component which uses renderImg or another API function, since it removes astro-imagetools from transpilation, causing errors in the browser.