Transforming async generator functions is not supported yet

[axelthat]

What version of astro are you using?

1.9.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

I want to support old browsers for my website. I am currently trying to use @vitejs/plugin-legacy. But while building I get this error,

[vite:esbuild-transpile] Transform failed with 9 errors:
entry.mjs:551:0: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
entry.mjs:683:2: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
entry.mjs:696:0: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
entry.mjs:1256:2: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
entry.mjs:1295:0: ERROR: Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
...

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
548|  function markHTMLBytes(bytes) {
549|    return new HTMLBytes(bytes);
550|  }
   |    ^
551|  async function* unescapeChunksAsync(iterable) {
   |  ^
552|    for await (const chunk of iterable) {

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
681|      return "AstroComponent";
682|    }
683|    async *[Symbol.asyncIterator]() {
   |    ^
684|      const { htmlParts, expressions } = this;
685|      for (let i = 0; i < htmlParts.length; i++) {

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
693|  function isRenderTemplateResult(obj) {
694|    return typeof obj === "object" && !!obj[renderTemplateResultSym];
695|  }
   |    ^
696|  async function* renderAstroTemplateResult(component) {
   |  ^
697|    for await (const value of component) {

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
1254|      return this.returnValue;
1255|    }
1256|    async *render() {
   |    ^
1257|      if (this.returnValue === void 0) {
1258|        await this.init();

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
1292|    return typeof obj === "object" && !!obj[astroComponentInstanceSym];
1293|  }
1294|  
   |   ^
1295|  async function* renderChild(child) {
   |  ^
1296|    child = await child;

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
1987|    }
1988|    if (!hydration) {
1989|      return async function* () {
   |             ^
1990|        if (slotInstructions) {
1991|          yield* slotInstructions;

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
2029|      island.props["await-children"] = "";
2030|    }
2031|    async function* renderAll() {
   |    ^
2032|      if (slotInstructions) {
2033|        yield* slotInstructions;

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
2086|    const children = item.children;
2087|    return index === all.findIndex((i) => JSON.stringify(i.props) === props && i.children == children);
2088|  };
   |     ^
2089|  async function* renderExtraHead(result, base) {
   |  ^
2090|    yield base;

Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
2111|    return renderAllHeadContent.bind(null, result);
2112|  }
2113|  const renderHead = createRenderHead;
   |                                       ^
2114|  async function* maybeRenderHead(result) {
   |  ^
2115|    if (result._metadata.hasRenderedHead) {

 error   Transforming async generator functions to the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari11.1" + 2 overrides) is not supported yet
  File:
    entry.mjs

How do I fix this?

Link to Minimal Reproducible Example

https://stackblitz.com/edit/typescript-ry3189

Participation

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

[axelthat]

Hello, can anyone please help me with this? 😅

[ElyDotDev]

@axelthat I managed to make this work by using vite-plugin-babel and babel related plugins like below:

plugins: [
            legacy(),
            babel({
                babelConfig: {
                    plugins: ['@babel/plugin-transform-async-to-generator', '@babel/plugin-proposal-async-generator-functions'],
                },
            }),
        ],

The legacy files are created with the polyfills, But I couldn't find any reference to them in the HTML files created. As of right now I don't have the required env to test if it actually works in older browsers I cannot confirm it is actually working or not.

[natemoo-re]

I don't think this plugin is going to do what you're hoping for—it's currently compiling the Astro server-side JS to a legacy format. It's also not going to automatically reference the down-leveled JS since we handle script injection ourselves.

As of right now, all I can say is that this isn't currently supported but we may be able to fix that in the future.

[axelthat]

Thank you for your reply. I just have one question. Won’t this stop people from adopting Astro? Most people use astro for their static site and these sites demands to be run in legacy browsers. Nevertheless I hope this issue is fixed soon. Thanks!

[moritzlaube]

Same issue here. I am running an ecommerce store on Astro 2.0 and need support for older browsers. Would be awesome to be able to use @vitejs/plugin-legacy again...

[matthewp]

The code shown here is Astro's internal code; it does not run in the browser. I think the problem is you are using a Vite plugin that is running both to transform the server code and the client code.

If you want to run a Vite plugin just on the client code you'll need to use the integration API to do that, which would work something like this:

import pluginLegacy from '@vitejs/plugin-legacy';
import { defineConfig } from 'astro/config';



export default defineConfig({
  integrations: [
    {
      name: 'my-integration',
      hooks: {
        'astro:build:setup': ({ vite, target }) => {
          if(target === 'client') {
            vite.plugins.push(pluginLegacy());
          }
        }
      }
    }
  ]
});

[moritzlaube]

Works! You guys are just doing amazing work. Thanks so much for your help.

[putnikproj]

Unfortunately, you can only create legacy chunks, but not to inject them into generated html files using this approach. Is it possible to automaticaly inject legacy chunks with <script nomodule> into html how plugin-legacy actually does it without Astro?