🐛 BUG: Build Failure on Linux with components inside Astro slots

EmNudge commented 2 years ago

What version of `astro` are you using?

0.22.3

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

On Linux specifically build fails with

panic: runtime error: nil pointer dereference
RuntimeError: Error: Uh oh, the Astro compiler encountered an unrecoverable error!

Project builds fine on Windows and MacOS.

Unable to get a minimal reproducible example as the error seems very volatile, although it seems very centered around this code:

<Framework name="Vue">
    <VueAudio client:visible slot="audio" />
    <VueTabs client:visible slot="tabs" />
</Framework>

<Framework name="Svelte">
    <SvelteAudio client:visible slot="audio" />
    <SvelteTabs client:visible slot="tabs" />
</Framework>

<Framework name="React">
    <ReactAudio client:visible slot="audio" />
    <ReactTabs client:visible slot="tabs" />
</Framework>

<Framework name="Solid">
    <SolidAudio client:visible slot="audio" />
    <SolidTabs client:visible slot="tabs" />
</Framework>

These are astro components wrapping Vue, Svelte, React, and Solid components. Removing at least 2 of these will remove the error. Perhaps component libraries fighting somehow? The file can be viewed here

Link to Minimal Reproducible Example

https://github.com/EmNudge/implicit-props-pattern/blob/d9a991d0a4dbb0a2297280d853e126d8d4ba269d/src/pages/components.astro

jonathantneal commented 2 years ago

panic: runtime error: nil pointer dereference

Could this be a compiler issue, @natemoo-re?

Reproduction does not happen, but the StackBlitz link is https://stackblitz.com/github/EmNudge/implicit-props-pattern/tree/d9a991d0a4dbb0a2297280d853e126d8d4ba269d

Jeremie-Chauvel commented 2 years ago

I had what seems like the same issue, only when running astro build, not reproduced locally (dev on linux ubuntu focal) but when building on netlify (image: Ubuntu Focal 20.04 (default)):

8:22:01 PM: panic: runtime error: nil pointer dereference
8:22:01 PM: RuntimeError: Error: Uh oh, the Astro compiler encountered an unrecoverable error!

(tested on astro 0.22.5) sadly the link to create an issue was not working properly and I had to un-encode it to see the impacted file:

---
import BaseLayout from '~/layouts/BaseLayout.astro'
import contentful from '~/helpers/contentful.js'
import getTranslation from '~/helpers/lang/getTranslation.js'
import Section from '~/components/Atoms/Section.vue'
import Frame from '~/components/Atoms/Frame.astro'

const { title, frames } = await contentful.getGalleryContent()
const { displayBanner, bannerText, headerTitle } =
  await contentful.getHeaderContent()

export async function getStaticPaths() {
  return [{ params: { gallery: getTranslation('pages.gallery.url') } }]
}
---
<BaseLayout
  {displayBanner}
  {bannerText}
  {headerTitle}
  title={getTranslation('pages.gallery.titleTag')}
  description={getTranslation('pages.gallery.descriptionTag')}
>
  <Section class="gallery">
    <h2 class="gallery__title">{title}</h2>
    <div class="gallery__frame-grid">
      {frames.map((frame, index) => (
        <div class="gallery__frame">
          <div class="gallery__frame-container">
            <Frame
              title={frame.fields.title}
              imageURL={frame.fields.file.url}
              alt={frame.fields.description}
              lazyLoading={index > 1}
              sizes="(max-width: 800px) 100vw, (max-width: 1250px) 45vw, 30vw"
            />
          </div>
        </div>
      ))}
    </div>
  </Section>
</BaseLayout>

Since I didn't have any idea, I tried installing the beta prettier plugin. Once installed it was also crashing on the same file with a cryptic error:

[error] src/pages/[gallery].astro: ParseError: </div> attempted to close an element that was not open

Since I easily confirmed that I didn't have any additional/missing <div>, I started looking at the issue differently and found that the line lazyLoading={index > 1} was causing the issue. In fact refactoring away this condition allowed both prettier to pass successfully and my build to pass again on netlify.

---
import BaseLayout from '~/layouts/BaseLayout.astro'
import contentful from '~/helpers/contentful.js'
import getTranslation from '~/helpers/lang/getTranslation.js'
import Section from '~/components/Atoms/Section.vue'
import Frame from '~/components/Atoms/Frame.astro'

const { title, frames } = await contentful.getGalleryContent()
const { displayBanner, bannerText, headerTitle } =
  await contentful.getHeaderContent()

export async function getStaticPaths() {
  return [{ params: { gallery: getTranslation('pages.gallery.url') } }]
}

const shouldLazyLoad = (index) => index > 1
---

<BaseLayout
  {displayBanner}
  {bannerText}
  {headerTitle}
  title={getTranslation('pages.gallery.titleTag')}
  description={getTranslation('pages.gallery.descriptionTag')}
>
  <Section class="gallery">
    <h2 class="gallery__title">{title}</h2>
    <div class="gallery__frame-grid">
      {frames.map((frame, index) => (
        <div class="gallery__frame">
          <div class="gallery__frame-container">
            <Frame
              title={frame.fields.title}
              imageURL={frame.fields.file.url}
              alt={frame.fields.description}
              lazyLoading={shouldLazyLoad(index)}
              sizes="(max-width: 800px) 100vw, (max-width: 1250px) 45vw, 30vw"
            />
          </div>
        </div>
      ))}
    </div>
  </Section>
</BaseLayout>

I tried to create a basic reproduction on stackbliz without luck as it seems the crash depends on the builder/cache.

natemoo-re commented 2 years ago

panic: runtime error: nil pointer dereference
Could this be a compiler issue, @natemoo-re?

This is definitely a compiler issue!

It doesn't make much sense to me that something would work on macOS and Windows but not on Linux... Not to say that isn't the case here, just that I wonder if something else could be going on. The Astro compiler shouldn't have any platform-specific differences because they all use the same WASM file.

I'll have to dig into this more!

natemoo-re commented 2 years ago

@Jeremie-Chauvel nice detective work! I couldn't reproduce any problems with attr={index > 1} in the compiler test suite, but I did add some tests to catch regressions.

I'm very curious to get to the bottom of this.

pgrones commented 2 years ago

Having the same error on Windows, also on Astro 0.22.3. I'm using React as Frontend Framework though. Let me know if I can do anything to help find the problem

@astrojs/compiler encountered an unrecoverable error when compiling the following file.

---
import Header from '../components/common/Header.astro';
import LinkPreview from '../components/common/LinkPreview.astro';
import YuukiYuunaMessenger from '../components/yuukiYuunaMessenger/YuukiYuunaMessenger.tsx';
---
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Anime Apps Made Real</title>

    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&display=swap" rel="stylesheet">
    <script>
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            localStorage.theme = 'dark';
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    </script>
    <style>
    :global(.bottom-img) {
        mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,1),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0), rgba(0,0,0,0));
    }
    :global(.text-outline){
        text-shadow: -1px -1px 0 #3E4F56, 1px -1px 0 #3E4F56, -1px 1px 0 #3E4F56, 1px 1px 0 #3E4F56;
    }
    :global(.text-outline-light){
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    }
    :global(.fairy) {
        animation: bounce 1s ease-in-out 0s infinite alternate;
    }
    </style>
</head>
<body class="font-['Roboto'] bg-slate-200 dark:bg-slate-800 text-black dark:text-slate-100 h-screen overflow-hidden">   
    <Header/>
    <main id="main" class="grid grid-cols-1 lg:grid-cols-2 px-6 md:px-40 xl:px-72 2xl:px-96 pt-20 pb-4 gap-20 h-full overflow-auto">
        <div class="flex justify-center align-items-center rounded -mx-6 md:mx-0 p-0 md:p-3 dark:bg-slate-900 bg-slate-50">
            <YuukiYuunaMessenger client:idle />
        </div>
        <div class="flex flex-col justify-between items-stretch text-justify">
            <LinkPreview url="https://anilist.co/anime/20800/" /> 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.          
            <video class="rounded" height="auto" width="100%" alt="anime source" autoplay loop >
                <source src="/assets/yuukiYuunaMessenger/Reference.webm" type="video/webm">
                <source src="/assets/yuukiYuunaMessenger/Reference.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </main>
</body>
</html>

pgrones commented 2 years ago

After a bit of fiddling I figured out that the import of the video sources was the problem. After wrapping the path into an Astro.resolve() the build worked, but the videos aren't loaded when I serve the website. I'm only getting a 206 code back.

boehs commented 2 years ago

This is happening for me, latest astro. It only happens on my linux box. On my server it's fine. When I delete any random bit of text anywhere in the file it works again.

God save me.

(edit: https://i.boehs.org/astrobeingmean1.mp4)

FredKSchott commented 2 years ago

Thanks everyone, I believe Astro v0.24.0 solved this issue! Can you confirm? Feel free to comment here if not and we'll reopen.

withastro / astro