TypeError Astro[this.getAttribute(...)] in Chrome #4286

sandervspl · 2022-08-12T09:47:54Z

What version of `astro` are you using?

v1.0.3

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

None

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

It's not something I am able to reproduce, sadly. It only happens on Chrome (both Mac and Windows) and only when deployed (to Cloudflare in this case). I have turned off minification on Cloudflare but that didn't fix it.

The error:

Uncaught (in promise) TypeError: Astro[this.getAttribute(...)] is not a function
    at a.childrenConnectedCallback ((index):455:1910)
childrenConnectedCallback @ (index):455
await in childrenConnectedCallback (async)
connectedCallback @ (index):455
(anonymous) @ (index):455

Relevant code from source

async childrenConnectedCallback() {
  window.addEventListener("astro:hydrate", this.hydrate),
  await import(this.getAttribute("before-hydration-url"));
  const r = JSON.parse(this.getAttribute("opts"));
  Astro[this.getAttribute("client")](async()=>{
      const e = this.getAttribute("renderer-url")
        , [i,{default: o}] = await Promise.all([import(this.getAttribute("component-url")), e ? import(e) : ()=>()=>{}
      ]);
      return this.Component = i[this.getAttribute("component-export") || "default"],
      this.hydrator = o,
      this.hydrate
  }
  , r, this)
}

Link to Minimal Reproducible Example

This is one of the pages where the error occurs

https://wowvalor.app/en/death-knight/blood/mm/

Participation

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

The text was updated successfully, but these errors were encountered:

bluwy · 2022-08-12T12:31:55Z

I can see the error in Chrome only too. Firefox and Safari are working fine. It looks like it's trying to access Astro.idle to only load the component after idle, but Astro.idle is only initialized after it's being called, the script tag order is incorrect. I'm not sure how this happens yet though (investigating).

sandervspl · 2022-08-12T12:38:22Z

Thanks for looking into it!

matthewp · 2022-08-12T12:57:54Z

@sandervspl First, very cool app. Is it possible that you are using one of your :idle components inside of a slot? This is a very important bug to fix. Trying to figure out why it is happening because it should not. Slots is one area where I think this bug could occur. Going to attempt to recreate locally.

matthewp · 2022-08-12T13:06:18Z

This is the scenario I'm thinking could cause the bug:

<One />

<Something>
  <Two client:idle />
</Something>

Where <One /> has a component that includes client:idle.

sandervspl · 2022-08-12T13:08:00Z

Thanks! 🙂 The entire page is wrapped with a layout, so there is definitely a slot where client:idle is being used. Here is a small sample of one of those cases.

// MenuLayout.astro

<html lang={locale || 'en'} class="h-full min-h-full">
  <body class="min-h-full">
    <main class="bg-base-300 min-h-full">
      <div class="h-full layout-container flex flex-col items-center">
        <div class="h-full w-full">
          <slot name="body" />
        </div>
      </div>
    </main>
  </body>
</html>

// /pages/.../index.astro

<MenuLayout>
  <BTFTrigger client:idle>
  ...
  </BTFTrigger>
</MenuLayout>

BTFTrigger is a Preact component.

Is this what you are thinking of?

sandervspl · 2022-08-12T13:13:06Z

@matthewp I have sent you a request to access the repository. That might make tracking this down a bit easier

matthewp · 2022-08-12T13:56:51Z

I think I can recreate it in a test, working on that now.

matthewp · 2022-08-12T14:21:43Z

@sandervspl I think what is happening is that your MenuLayout component takes a slot that contains a client:idle, and the layout has its own MainMenu being used which also contains a component using client:idle. The slot is rendered first causing the hydration script tag to be created for it and not the MainMenu component which needs it.

I think this gives me enough info to recreate in a test.

matthewp · 2022-08-12T14:24:07Z

Yep, have a breaking test now, thanks!

sandervspl · 2022-08-12T14:26:47Z

Would it make sense to remove all :idle from children of a parent component which has :idle? Or is hydration done from child up to the parent?

matthewp · 2022-08-12T14:36:48Z

Astro components can't have client: directives. If you're looking for a workaround, maybe creates a client component that renders nothing and make it be the first thing you render in your page's body, something like <Empty client:idle />, that should ensure the scripts are added before any of the components render.

But, I don't think this bug will take too long to fix, I wrote this part of the code and understand why it's breaking.

matthewp · 2022-08-12T15:06:12Z

PR: #4288

sandervspl · 2022-08-12T15:31:19Z

Thanks a lot for the quick work! 💛

matthewp · 2022-08-12T16:19:14Z

Fixed! Release should go out later today.

elevatebart · 2022-08-16T19:53:14Z

For those wondering why this broke again, the fix had to be reverted.
Here is your answer
#4288 (comment)

Another fix is on the way.

Thank you @matthewp for the quick turnaround.

matthewp · 2022-08-16T19:59:11Z

Yes, sorry for not reopening.

The fix I made turned out not be a good one. The new fix will allow for hydration directive scripts to be defined lower than the islands that use them, because it seems that we can't control that with slots. I plan on working on this fix tomorrow.

matthewp added - P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority) s1-small labels Aug 12, 2022

matthewp self-assigned this Aug 12, 2022

matthewp closed this as completed Aug 12, 2022

elevatebart mentioned this issue Aug 16, 2022

Ensure hydration scripts inside of slots render ASAP #4288

Merged

matthewp reopened this Aug 16, 2022

matthewp mentioned this issue Aug 17, 2022

Fix race condition with directive definitions #4375

Merged

matthewp closed this as completed in #4375 Aug 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError Astro[this.getAttribute(...)] in Chrome #4286

TypeError Astro[this.getAttribute(...)] in Chrome #4286

sandervspl commented Aug 12, 2022 •

edited

Loading

bluwy commented Aug 12, 2022

sandervspl commented Aug 12, 2022

matthewp commented Aug 12, 2022

matthewp commented Aug 12, 2022

sandervspl commented Aug 12, 2022 •

edited

Loading

sandervspl commented Aug 12, 2022 •

edited

Loading

matthewp commented Aug 12, 2022

matthewp commented Aug 12, 2022

matthewp commented Aug 12, 2022

sandervspl commented Aug 12, 2022 •

edited

Loading

matthewp commented Aug 12, 2022

matthewp commented Aug 12, 2022

sandervspl commented Aug 12, 2022

matthewp commented Aug 12, 2022

elevatebart commented Aug 16, 2022

matthewp commented Aug 16, 2022

TypeError Astro[this.getAttribute(...)] in Chrome #4286

TypeError Astro[this.getAttribute(...)] in Chrome #4286

Comments

sandervspl commented Aug 12, 2022 • edited Loading

What version of astro are you using?

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

What package manager are you using?

What operating system are you using?

Describe the Bug

Link to Minimal Reproducible Example

Participation

bluwy commented Aug 12, 2022

sandervspl commented Aug 12, 2022

matthewp commented Aug 12, 2022

matthewp commented Aug 12, 2022

sandervspl commented Aug 12, 2022 • edited Loading

sandervspl commented Aug 12, 2022 • edited Loading

matthewp commented Aug 12, 2022

matthewp commented Aug 12, 2022

matthewp commented Aug 12, 2022

sandervspl commented Aug 12, 2022 • edited Loading

matthewp commented Aug 12, 2022

matthewp commented Aug 12, 2022

sandervspl commented Aug 12, 2022

matthewp commented Aug 12, 2022

elevatebart commented Aug 16, 2022

matthewp commented Aug 16, 2022

sandervspl commented Aug 12, 2022 •

edited

Loading

What version of `astro` are you using?

sandervspl commented Aug 12, 2022 •

edited

Loading

sandervspl commented Aug 12, 2022 •

edited

Loading

sandervspl commented Aug 12, 2022 •

edited

Loading