Code Monkey home page Code Monkey logo

compiler's People

Contributors

43081j avatar andremralves avatar antonyfaris avatar bluwy avatar crutchcorn avatar delucis avatar drwpow avatar ematipico avatar fredkschott avatar getflourish avatar github-actions[bot] avatar janimo avatar jasikpark avatar jonathantneal avatar juanm04 avatar lilnasy avatar lostra01 avatar martrapp avatar matthewp avatar moustaphadev avatar natemoo-re avatar nix6839 avatar ota-meshi avatar princesseuh avatar ran-dall avatar virchau13 avatar williamtetlow avatar wtchnm avatar xnuray98s avatar yuhang-dong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

compiler's Issues

πŸ› BUG: RegEx not working properly

What version of astro are you using?

^0.23.0

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

I have an .astro file with some code calling the split function containing a regular expression

split(/\s+/)
// this does NOT work, even though it should

split(/[ ]+/)
// this DOES work

const words = text.trim().split(/[ ]+/).length;
// example of the working solution

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-fkkg12-wtamny?file=src%2Fpages%2Findex.astro&on=stackblitz

πŸ› BUG: Rendering multiple <td> elements in a map throws an error

What version of astro are you using?

0.22.3

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

If I try to render td elements inside a tr inside a table in a .astro file it throws an error unless I render only 1 td.

This fails

---
const items = ["Dog", "Cat", "Platipus"]
---

<table>
  <tbody>
    {items.map(item => (
      <tr>
        <td>{item}</td>
        <td>{item}</td>
      </tr>
    ))}
  </tbody>
</table>

This works

---
const items = ["Dog", "Cat", "Platipus"]
---

<table>
  <tbody>
    {items.map(item => (
      <tr>
        <td>{item}</td>
      </tr>
    ))}
  </tbody>
</table>

Error message:

/home/projects/github-c258bg/src/pages/index.astro: Expected ")" but found "}"
  67 | 		<!-- ASTRO:COMPONENT_MARKUP -->
> 68 | 	</main>
     |                   ^
  69 | </body>
  70 | </html>

Error: Transform failed with 1 error:
/home/projects/github-c258bg/src/pages/index.astro:68:19: error: Expected ")" but found "}"
    at failureErrorWithLog (/home/projects/github-c258bg/node_modules/esbuild/lib/main.js:1493:15)
    at eval (/home/projects/github-c258bg/node_modules/esbuild/lib/main.js:1282:29)
    at eval (/home/projects/github-c258bg/node_modules/esbuild/lib/main.js:629:9)
    at handleIncomingPacket (/home/projects/github-c258bg/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/projects/github-c258bg/node_modules/esbuild/lib/main.js:596:7)
    at Socket.EventEmitter.emit (https://github-c258bg.w.staticblitz.com/blitz.bc2b78560fa0e6097e7f69d4e820659cab64d2c5.js:6:126633)
    at addChunk (https://github-c258bg.w.staticblitz.com/blitz.bc2b78560fa0e6097e7f69d4e820659cab64d2c5.js:6:508416)
    at readableAddChunk (https://github-c258bg.w.staticblitz.com/blitz.bc2b78560fa0e6097e7f69d4e820659cab64d2c5.js:6:508137)
    at Socket.Readable.push (https://github-c258bg.w.staticblitz.com/blitz.bc2b78560fa0e6097e7f69d4e820659cab64d2c5.js:6:508804)
    at _0x4cfe62.onStreamRead [as onread] (https://github-c258bg.w.staticblitz.com/blitz.bc2b78560fa0e6097e7f69d4e820659cab64d2c5.js:6:535934)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-c258bg?file=src/pages/index.astro

πŸ› BUG: bus error 10... RuntimeError: memory access out of bounds

What version of astro are you using?

0.23.0-next.6

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

We are using alpine components embedded into the astro page. We have found after upgrading to 0.23.0-next.6 we get a bus error 10 on our Mac and RuntimeError: memory access out of bounds on stackblitz.

The issue relates to the size of the html block in an alpinejs template entity. If we make it smaller it works ok. If we use another astro component say CartItems.astro and include the block this way it works. When we have the full block between the template we get the error and crash..

There seems to be more information from the stackblitz runtime, than what we get from our Mac build.

This works fine in 0.22.20

Thanks

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-nvdxee

πŸ› BUG: .astro files break when adding apostrophe to HTML's title tag

What version of astro are you using?

0.22.13

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

When adding an apostrophe to any HTML title tag on .astro files, you get an Internal Error with a cryptic/misleading error message.

Error log in the minimal reproducible example:

/home/projects/github-kmp3ni-fqobhy/src/pages/index.astro: Unexpected "..."

Error: Transform failed with 1 error:
/home/projects/github-kmp3ni-fqobhy/src/pages/index.astro:32:12: error: Unexpected "..."
    at failureErrorWithLog (/home/projects/github-kmp3ni-fqobhy/node_modules/esbuild/lib/main.js:1493:15)
    at eval (/home/projects/github-kmp3ni-fqobhy/node_modules/esbuild/lib/main.js:1282:29)
    at eval (/home/projects/github-kmp3ni-fqobhy/node_modules/esbuild/lib/main.js:629:9)
    at handleIncomingPacket (/home/projects/github-kmp3ni-fqobhy/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/projects/github-kmp3ni-fqobhy/node_modules/esbuild/lib/main.js:596:7)
    at Socket.EventEmitter.emit (https://github-kmp3ni-fqobhy.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:126633)
    at addChunk (https://github-kmp3ni-fqobhy.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:508416)
    at readableAddChunk (https://github-kmp3ni-fqobhy.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:508137)
    at Socket.Readable.push (https://github-kmp3ni-fqobhy.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:508804)
    at _0x212164.onStreamRead [as onread] (https://github-kmp3ni-fqobhy.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:535934)

If, useful, you can also check the error log of when I found the bug in my personal project:

C:/Users/Pichau/Documents/Projects/yanthomas-dev/src/layouts/BlogPostsLayout.astro: Expected ">" but found "post"

Error: Transform failed with 1 error:
C:/Users/Pichau/Documents/Projects/yanthomas-dev/src/layouts/BlogPostsLayout.astro:60:47: error: Expected ">" but found "post"
    at failureErrorWithLog (C:\Users\Pichau\Documents\Projects\yanthomas-dev\node_modules\esbuild\lib\main.js:1493:15)
    at C:\Users\Pichau\Documents\Projects\yanthomas-dev\node_modules\esbuild\lib\main.js:1282:29
    at C:\Users\Pichau\Documents\Projects\yanthomas-dev\node_modules\esbuild\lib\main.js:629:9
    at handleIncomingPacket (C:\Users\Pichau\Documents\Projects\yanthomas-dev\node_modules\esbuild\lib\main.js:726:9)
    at Socket.readFromStdout (C:\Users\Pichau\Documents\Projects\yanthomas-dev\node_modules\esbuild\lib\main.js:596:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:199:23)

I'm giving a look at the Astro codebase, If I find anything useful or a solution I will add a comment here and/or make a PR!

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-kmp3ni-fqobhy?file=src/pages/index.astro

πŸ› BUG: set:html set:text should handle values of null

What version of astro are you using?

0.23.0-next.6

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When using set:html and set:text it would be nice if null was handled properly

For set:html null is simply returned. In this case it would be ideal if a blank string was returned given this is what happens pre set:html

example
<p set:html={title}>/</p> vs <p>{title}</p>

In the case of set:text the following error is produced

Cannot read properties of null (reading 'replace')
TypeError: Cannot read properties of null (reading 'replace')
at Module.escapeHTML (../../../src/runtime/server/escape.ts:5:32)
at eval (/home/projects/withastro-astro-b9kuzj/src/pages/index.astro:23:30)
at renderToString (file:///home/projects/withastro-astro-b9kuzj/node_modules/astro/dist/runtime/server/index.js:347:27)
at Module.renderPage (file:///home/projects/withastro-astro-b9kuzj/node_modules/astro/dist/runtime/server/index.js:357:26)
at render (file:///home/projects/withastro-astro-b9kuzj/node_modules/astro/dist/core/ssr/index.js:184:45)
at async Module.ssr (file:///home/projects/withastro-astro-b9kuzj/node_modules/astro/dist/core/ssr/index.js:235:12)
at async handleRequest (file:///home/projects/withastro-astro-b9kuzj/node_modules/astro/dist/vite-plugin-astro-server/index.js:89:18)

Again returning a blank string would be ideal.
Thanks
~jono

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-b9kuzj

πŸ› BUG: conditional rendering fails with noscript and iframe tags

What version of astro are you using?

0.22.18

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

panic: runtime error: nil pointer dereference
21:27:46 [vite] Error when evaluating SSR module <path>/src/pages/index.astro:
    at <path>/src/layouts/BaseLayout.astro (x28)
21:27 [astro] 500 /                                        115ms

The following throws the above error:
1.
{mode === "production" && <noscript></noscript>}
2.
{mode === "production" && <iframe src="<URL>" height="0" width="0" style="display:none;visibility:hidden" />}

This works

{mode === "production" && <div>abc</div>}

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-anjyep?file=src%2Fpages%2Findex.astro&on=stackblitz

πŸ› BUG: Nil pointer dereference when the file is long

What version of @astrojs/compiler are you using?

0.8.2

What package manager are you using?

npm, yarn

What operating system are you using?

Mac, Windows, Linux

Describe the Bug

There’s an issue in the compiler that has something to do with the number of characters in a file.

Example: https://github.com/lloydjatkinson/going-insane

panic: runtime error: nil pointer dereference
RuntimeError: Error: Uh oh, the Astro compiler encountered an unrecoverable error!
  • If we change the project from 4-space to 2-space or from 4-space to tabs, the error goes away.
  • If we replace every character in a class with z it still throws.
  • It has something to do with the number of characters in the file.

Link to Minimal Reproducible Example

https://github.com/lloydjatkinson/going-insane

πŸ› BUG: Compiler throws error when creating a <textarea> element`

What version of astro are you using?

0.22.1

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Creating a textarea element inside of an Astro component is causing a a compile error

[vite] Error when evaluating SSR module /home/projects/github-zbqlea/src/pages/index.astro: at /home/projects/github-zbqlea/src/components/input.astro (x2)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-zbqlea?file=src/components/input.astro

πŸ› BUG: self-closing <img /> tag in <Markdown> in astro@next--compiler causes panic

What package manager are you using?

pnpm

What operating system are you using?

Linux

Describe the Bug

Using astro 0.0.0-compiler-2021928195510

Use the following .astro page:

---
import { Markdown } from 'astro/components';

const img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAJElEQVR42gXBQQEAIAgEsGn/JCTwRx3eVwA3G8qGnmz05OI8+OMgDGtMzxoHAAAAAElFTkSuQmCC";
---
<html>
  <body>
    <Markdown>
      <img src={img} />

      ```
      a brace is incoming {
      ```
    </Markdown>
  </body>
</html>

The astro dev process gives

panic: runtime error: index out of range

and the output page says

500 Internal Error
unreachable

Notes:

Each of these variations individually make it work:

  • Replacing <img src={img} /> with <img src={img}></img>.
  • Removing the { in a brace is incoming {
  • Removing all the backticks
    • However in this case, the { is rendered as a }

Also the example works without any modifications in astro 0.20.6, the output being

(very small image)
a brace is incoming {

Steps to Reproduce

  1. npm init astro using any template
  2. npm install astro@next--compiler
  3. Use the astro file above
  4. Error as above, would like to see behaviour from 0.20.6 maintained

Link to Minimal Reproducible Example (Optional)

No response

πŸ› BUG: Import(s) will cause crash if not at top of .astro file

What version of @astrojs/compiler are you using?

(Whatever goes with Astro 1.0.0-beta.2)

What package manager are you using?

npm

What operating system are you using?

macOS 12.3.1

Describe the Bug

Astro throws errors (usually about a missing "{") if any import statements are not at the top of an .astro file.

Besides the minimal reproducible example below, see also:

https://discord.com/channels/830184174198718474/961091216089440317

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-9skgk5 (see the Index.astro file).

πŸ› BUG: panic: Export statements must be placed at the top of .astro files!

What version of astro are you using?

0.21.6

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

Astro 0.21+ introduces a regression where export statements must be placed before import statements. Otherwise, the build will fail with panic: Export statements must be placed at the top of .astro files!.

Ideally this would not be a requirement as most conventional JS/TS places import in the very first lines.

Link to Minimal Reproducible Example

https://astro.new

πŸ› BUG: Invalid markup generates a runtime error

What version of astro are you using?

0.25.4

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

I am seeing an error attempting to render a very simple template. Support thread here: https://discord.com/channels/830184174198718474/958787462606495804

Minimal example linked below.

<!-- this works -->
{Object.keys(importedAuthors).map(author => <p>
	<div>hello</div>
</p>)}

<!-- this does not work -->
{Object.keys(importedAuthors).map(author => <p>
	<div>{author}</div>
</p>)}

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-rztbls?file=src/pages/index.astro

Participation

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

πŸ› BUG: error with rendering table

What version of astro are you using?

0.21.11

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When upgrading from 0.21.4 to 0.21.11, one of my page causes an error error: Expected "=>" but found ")"

The error seems a bit random. From the example linked below, I can cause it to go away by replace <tr> with <div> under map or replacing some {header[0]}... before that to hard coded strings πŸ€”

Link to Minimal Reproducible Example

https://astro.build/play#EQegDghg5gpgziACtGA6CcAuAnA9sALmABkBFAC1IFE4AxOAQQGMAJOAYSYYFcH2GAzFACyAdwBaDcrigA3ON1nEAUsKgB5UgwC2vMHHVQWATQAi6yQOEBHANINEAZQBmASVPWAjAwDio0z7KGADWjgAewQykAKoQygCWUfEALACcMAAcTK4AVlQMYABGDKYAJozijj549j4AKq4MtlBUqbjeAAziWsQQsj64DBDi6izY8QB2AJ4MVKTxxgDqLGDWMOQASj6kAgBCOSVgzsqkcCxMVOKRLKWiUbTBMAy7ABrEorhwni+DTABMGTCfGEWFcYAETDAGygAHZFkxEMQOqRnKVWnBTAA5KBwMI+KDcazERIANWixjC4m4uHIAFZaJ4SYVaLZdtEmBBHLSGAxlExRLtJLsADZhCDkKC7HzaDaOUQk8jBWTcZLJKCmGipTSpRyeUyMBgZBjEHLxFhbGE+GAAamStkW7FoPls6kpxni8Vp0WsE12VGI2gYrgmuFI2lwEWME1M1qYwqgyWUriYPnYuAVLCkcGFf1o1Hi7GCZu4MyDOUYxAAXq5jCpjMEOjzorNcItWcJHFAoIUchlHEw4MRyJ5dhtguo6sJEMxXFAIBAphljOQBD4NsKwMRhXAoLZaCTgspjLRxFd2LtaLJSq5lLsYbhRM4Q6VFqQfNEplBhfFrK5yIPK0iXZMGBGEoAYOp1GSBhhErXgGEYBkfCYQCqFpOBRwmKhhSmGAF3YVxdiCKZ1GaStClIa1SCgABaQpXGSEwgwmV8XggKJhF2LQGBgcQADZSFMYh6OsYIBFEcgXjuRBhQYKZtm0GBcAETdxEKYg+KYKAR0xKZ2CoUxtFEDJ2B8M1Kxol5hGUP4eQYWl4j4xYIGtLCBiuRZJBySIGFoQoIFfbAqBYVxolKdQLhgVxhBgUw-hLRxK2wbQvmwDprWtXZcFMGAYW0RYgnYStRBDHwIAEMcJm0TAXj4+IBGMBh2R4VxSByXBbCoXBMUqUwOkWVIBFpXY-gmKIwD4nwGExDZMRyGBlDgUgJmiGBdhoysrw2QpglIRqoGUBhsDaCL1HYOowlENbCyXXl8VIYUyAYEltA6XYwmETEBDqLj2sKXZ3EccJ2EcUJjF2BhcG5DIfEQEFcBDRZdk8dhp1MYI-AEUw+KoQ7fBJeIpj+bsOheKZbFceIXioKAmDqUooC0VIjG7TxRHYKZHBy4mfAydRlGwaJ9H055sBgcKQ3Ych2C0YxwOiRxSlsSt4lsHcGD+XY6kceJolpUR4nUDphp8Fgci4GBTnA8hjUWRBjAEUocIEG4pg6ZJUWsARiFocmaAgXoBAEcRRCoawWFZeJhUcKXtAmStdimWaMjqTxrCm2laQyTwYTeRBECgVwNgyP4YBJWkBGCZJEFPWgoFKHl2DgZxGdIMB1FmJH2HjRZaGSUhR3ITAqFsRFidz0QbNcSR1GsPjaZhDpK0cDp4lEV9SHUWQmGEQpjBYYJxFYQzvo6YnlEwTB4k8ZxMW4RBYnYxA6mcNVggpxh2GibBGnURxlGVtgawQQNiVhYNwaInVHAU0wB0Twtg1rqF2I4R20QLxO3UBsPCu5UzBFSDmKAtBiCeDgNgQ0NEaTBE8GAPIrVUhwGMM4YQfFMT2VcHxFg6hTCuBeH8DoLBKwQHYCSRAqYnjizgDQRqhQNhUG9skcQhZxCyBJH8WQyQOilAyELdgBw4CVhEBsd0EBSgdG0BAekYBgh5WCBkXahQBHRQyFCMAEwS7uwYJw0g7FbDOEwKYcQVAO6LGSEWXAYBsZhGcCwVIYRaDRFwJWRAASci2HumAdg4gJikFoBBUoyhPDQJgLSYIdRggc3Yg42wshaTp3UDReIMJPCkAAX8AQmIqCOBeC8XYqQ-jkDCD0gUhRaQDPIAzaILwaJm3YC8VaG4Mi0mMCSaCwomCXxeOwLZdQXgomiB0KA3IxBTBykGLGHRMBwD+MQJgxwObiEwHxCYMImClH1uQXYpRMC2VpNgOoDVSipFsB0Gibzgjz1pKYcgfgaJbMQNYUwtA+KiOcG0iQxgLovGFBAUgnh1CYieMQRYcBUieAEIgDIGRiBTBbrsLcMBbDWgYIsAQc9SjcG4BKQoYRuAdHYLE8glYNiYHZaYVI2BiDcHUKkUwGRECuBon3Zw2gHHWgKrSOoqQXgdFSPHdQpRxAWUWPEKAxAoDaEacQmAI5yLYD+JgMAshbDcH1KUJpfwYTkBhK4a0tIwAwg2BMclChxC4D5a4bAGQpiyGsFAOwfEoVTEGfEbgOI4DWH2HUYw7B4imDnNNVwEANjRBoFBOoohEBFHIB0YUtIqCeQLRkWgpgJglKgEy2w7A+IbA6BMVI4INgMDOoKVwthtDqBPLc9gwgk7RFIJibQrgloMGAEAA

πŸ› BUG: Using fragment shorthand inside of a jsx expressions breaks

What version of astro are you using?

0.21.5

What package manager are you using?

pnpm

What operating system are you using?

Windows

Describe the Bug

<h1>Articles{tag && <>tagged with <span class="coloured-text">#{tag.text}</span></>}</h1>

When I do this, I'm getting and error that says Unable to parse and the generated snipped it shows looks like this:

<h1 class="astro-ID2V7ADD">Articles<tag &&  class="astro-ID2V7ADD">tagged with <span class="coloured-text astro-ID2V7ADD">#astro</span></tag && >

When I swap out the fragment shorthand for <Fragment></Fragment>, or a normal element, it works fine.

Link to Minimal Reproducible Example

https://codesandbox.io/s/cocky-http-o9il7?file=/src/pages/broken.astro

πŸ› BUG: CSS @keyframes rules prevent scoping for all rules that follow

What version of astro are you using?

0.21.10

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

Summary

Using @keyframes in a <style> block in an astro component breaks selector scoping for all rules after the @keyframes rule.

This behavior changed between 0.20 and 0.21.

Example

Is this example, the .my-para declaration will be scoped properly. The .another-para will not be scoped.

<style>
  .my-para {
    color: blue;
  }

  @keyframes fadeIn {
    to {
      opacity: 100%;
    }
  }

  .another-para {
    color: red;
  }
</style>

That input CSS produces the following bundled CSS. Note: I've modified formatting here for readability

.my-para.astro-FNZOVGOV {
  color: #00f;
}
@keyframes fadeIn {
  to {
    opacity: 100%;
  }
}
.another-para {
  color: red;
}

The expecation is that .another-para would be scoped .another-para.astro-FNZOVGOV. This was was the behavior in Astro pre 0.21.

Further testing

From what I've been able to tell, the @keyframes rule breaks scoping for all rules that come after it. So, if we modify our above example to put @keyframes first, no styles are scoped

<style>
  @keyframes fadeIn {
    to {
      opacity: 100%;
    }
  }

  .my-para {
    color: blue;
  }

  .another-para {
    color: red;
  }
</style>

produces the following (again, formatting modified here for readability)

@keyframes fadeIn {
  to {
    opacity: 100%;
  }
}
.my-para {
  color: #00f;
}
.another-para {
  color: red;
}

Working around this

This is a bit flimsy, but you can work around this by putting all @keyframes rules at the bottom of any <style>.

<style>
  .my-para {
    color: blue;
  }

  .another-para {
    color: red;
  }

  @keyframes fadeIn {
    to {
      opacity: 100%;
    }
  }
</style>

Produces:

.my-para.astro-FNZOVGOV {
  color: #00f;
}
.another-para.astro-FNZOVGOV {
  color: red;
}
@keyframes fadeIn {
  to {
    opacity: 100%;
  }
}

Other @-rules

This seems to be isolated to @keyframes. I tested with @supports and @font-face. Neither of those caused this same, or other, issues.

My hunch is that the extra curly braces needed in @keyframes declarations trips things up.

Link to Minimal Reproducible Example

https://codesandbox.io/s/clever-jennings-xlp4z?file=/src/pages/index.astro

πŸ› BUG: Markdown `Expected "=>" but found end of file`

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Markdown with ({}) in it causes exception:

 π˜… Expected "=>" but found end of file

   > 1 | ({})
       |     ^

file:///Users/xxx/astro-bug-arrow-expected/node_modules/astro/dist/compiler/codegen/index.js:213
    throw new Error(`Unable to compile expression`);
          ^

Steps to Reproduce

git clone [email protected]:amatiasq/astro-bug-arrow-expected.git
cd astro-bug-arrow-expected
npm i
npm start

Expected result

It should render an HTML with ({})

Actual behaviour

[13:36:02] [snowpack] File changed: src/pages/index.md
[access] /
[parse-error] 

 /Users/xxx/astro-bug-arrow-expected/src/pages/index.md:1:7

 π˜… Expected "=>" but found end of file

   > 1 | ({})
       |     ^

file:///Users/xxx/astro-bug-arrow-expected/node_modules/astro/dist/compiler/codegen/index.js:213
    throw new Error(`Unable to compile expression`);
          ^

Error: Unable to compile expression
    at compileExpression (file:///Users/xxx/astro-bug-arrow-expected/node_modules/astro/dist/compiler/codegen/index.js:213:11)
    at async Object.enter (file:///Users/xxx/astro-bug-arrow-expected/node_modules/astro/dist/compiler/codegen/index.js:464:24)
    at async AsyncWalker.visit (file:///Users/xxx/astro-bug-arrow-expected/node_modules/estree-walker/src/async.js:49:5)
    at async AsyncWalker.visit (file:///Users/xxx/astro-bug-arrow-expected/node_modules/estree-walker/src/async.js:86:6)
    at async AsyncWalker.visit (file:///Users/xxx/astro-bug-arrow-expected/node_modules/estree-walker/src/async.js:79:14)
    at async AsyncWalker.visit (file:///Users/xxx/astro-bug-arrow-expected/node_modules/estree-walker/src/async.js:79:14)
    at async asyncWalk (file:///Users/xxx/astro-bug-arrow-expected/node_modules/estree-walker/src/index.js:34:9)

Link to Minimal Reproducible Example (Optional)

https://github.com/amatiasq/astro-bug-arrow-expected

πŸ› BUG: Math in markdown throws errors or crashes Astro fully.

What version of astro are you using?

0.22.6

What package manager are you using?

pnpm

What operating system are you using?

macOS Monterey 12.1

Describe the Bug

When using remark-math and remark-katex to extend the default markdown pipeline @astrojs/markdown-remark (as described in the docs),

  • In v0.22.3 curly braces used in formulas cause Astro to throw errors.
    $f\colon\mathbb R^x$ is translated correctly.
    $f\colon\mathbb R^{x}$ throws Syntax error "x".

  • In v0.22.6 Astro quits unexpectedly in both cases with shell error zsh: bus error pnpm dev.

Please view the full example linked below.

EXPECTED BEHAVIOR:
Strings surrounded by $-signs should be ignored by Astro and handled by remark-math and remark-katex. Astro should not try to evaluate contents of curly braces as JS expressions when they are nested within a math context.

Link to Minimal Reproducible Example

https://stackblitz.com/github/AlexLike/astro-math-example

⚠️ Missing LICENSE!

What version of @astrojs/compiler are you using?

0.0.0

What package manager are you using?

all

What operating system are you using?

all

Describe the Bug

As raised by @gluck in withastro/astro#2166, this repo and packages are missing a LICENSE! We gotta add 'em.

Link to Minimal Reproducible Example

astro.new

πŸ› BUG: HTML Lines being Truncated after 700 characters

What version of @astrojs/compiler are you using?

v22.20

What package manager are you using?

yarn

What operating system are you using?

wsl2; ubuntu 20.04

Describe the Bug

This is a really weird edge case I have found, and I believe it has to do with the compiler doing something funny.

I have found that there seems to be a upper limit which is far lower than the actual theoretical limit placed by the language, on the total number of characters that are printed to a single line in the html source code.

I have found where it does truncate the string it does so in a manner that breaks the string itself, its very peculiar, for further information I append this small screenshot that demonstrates what It is I am seeing, alongside a reproduction.

If this could be resolved I would really appreciate it, since it seems to of inadvertently placed a character limit on how much scripting XElement can do, which borks the entire component after 700characters,
unknown

Link to Minimal Reproducible Example

https://codesandbox.io/s/vigorous-platform-p2jtq?file=/src/components/ProblemChild.astro

πŸ› BUG: Can't nest Astro components with `<slot/>`

What version of @astrojs/compiler are you using?

0.7.4

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

I am trying to use one Astro component as a child to another Astro component using slots.

I'm able to use plain old HTML in the parent component's slot, but when using an Astro component for the slot the child component is never rendered and is being thrown into the slot as a raw string

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-3bqujt-lpwy6r?file=src%2Fpages%2Findex.astro

πŸ› BUG: astro build generates non self-closing </link>tags

What version of astro are you using?

0.25.2

What package manager are you using?

yarn

What operating system are you using?

Linux

Describe the Bug

Inspecting the output of yarn build reveals the that it is generating separate closing tags for the <link>. When trying to use tools such as prettier on the generated HTML file it will output an error: SyntaxError: Void elements do not have end tags "link".

Link to Minimal Reproducible Example

Participation

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

Feat: normalize whitespace in compiler frontmatter

In the compiler’s generated code, it’ll export the frontmatter with // --- comments to show the boundaries:

// ---
your code…
your code…
// ---
component wrapper

However due to all the transformations, the whitespace surrounding // --- and within is very inconsistent from file to file. As a result, our tests are noisy, and we spend too much time as it is dealing with line break diffs that don’t matter.

As a cleanup task, let’s do some bare minimum work to make the compiler’s output a little more consistent, possibly with a cleanup pass.

Out of scope would be formatting / indenting your HTML perfectly. This isn’t so much about that, as simply cleaning up whitespace within the generated JS to make testing and output comparison a lot less noisy.

πŸ› BUG: [AST] style tag is moved inside the body tag

What version of @astrojs/compiler are you using?

0.12.0-next.8

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

The style tag is being moved to the body tag in the AST output.

This is:

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

<style>
  h1 {
    color: red;
  }
</style>

is treated as:

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Hello world!</h1>
    <style>
      h1 {
        color: red;
      }
    </style>
  </body>
</html>

So the output of the AST is unexpected for the Prettier plugin.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-8jjhc4?file=src%2Fpages%2Findex.astro&on=stackblitz

πŸ› BUG: Using .map() inside a `<select>` strips subsequent markup

What version of astro are you using?

0.25.0-next.3

What package manager are you using?

npm

What operating system are you using?

Stackblitz

Describe the Bug

Including a .map() inside a <select> inside a .astro file breaks all subsequent markup after the <select> (except the <option> tags). The Stackblitz includes comments and other examples that illustrate the example well: https://stackblitz.com/edit/github-39j8qw?file=src%2Fpages%2Findex.astro&on=stackblitz

Including this

<select>
  {[1, 2, 3].map(num => <option>{num}</option>)} 
</select>

Anywhere in index.astro will strip all the markup that follows it except the <option> tags, but the leave the text in tact. It doesn't break the whole page, so if you move it to the bottom of the page, nothing will be broken.

Screen Shot 2022-03-25 at 6 29 52 PM Screen Shot 2022-03-25 at 6 29 34 PM

Screen Shot 2022-03-25 at 6 31 51 PM

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-39j8qw?file=src%2Fpages%2Findex.astro&on=stackblitz

Participation

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

πŸ› BUG: Astro compiler fails after first curly brace closure in an expression

What version of astro are you using?

0.21.13

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

The following Astro file gets extra $$render functions added to the second and third functions within the expression.

{
	() => {
		let generate = (input) => {
			let a = () => { return; };
			let b = () => { return; };
			let c = () => { return; };
		};
	}
}

It gets turned into something like:

{
	() => {
		let generate = (input) => {
			let a = () => { return; };
			let b = () => $$render`${ return; }`;
			let c = () => $$render`${ return; }`;
		};
	}
}

Credit to @okikio for discovering the issue. πŸ™

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-gjpgyq

πŸ› BUG: export split across multiple lines is erroneously an error

What version of astro are you using?

0.23.2

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

If the first line of the frontmatter is export const = '...'; and the rvalue is long and gets moved to the next line due to e.g., prettier, esbuild will raise the following complaint:

 error: Unexpected "export"
    at failureErrorWithLog (/.../node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1493:15)
    at /.../node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1282:29
    at /.../node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/.../node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/.../node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:199:23)

Link to Minimal Reproducible Example

https://codesandbox.io/s/great-swanson-9gsjjn

πŸ› BUG: Dynamic JSX Expressions - using division operator breaks code

What version of astro are you using?

0.22.13

What package manager are you using?

npm

What operating system are you using?

MAC OSX

Describe the Bug

While in Frontmatter Script alle 4 algorithmic basic operations work fine, it is in the template / HTML part, where divisions are not possible.

In detail:
Writing dynamic HTML I can do additions {4+5} as well as subtractions {5-4} and multiplications {4*5}.

However, using the division operator {16 / 4} breaks the page.

Screenshot 2022-01-16 at 15 06 03

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-h3mvs5?file=src/pages/index.astro

πŸ› BUG: Using a slash character in a nested template literal in a component prop throws an error

What version of astro are you using?

0.22.14

What package manager are you using?

pnpm

What operating system are you using?

Windows

Describe the Bug

When using a slash character (/) inside of a nested template literal in a component prop, an error is thrown.
Example code:

---
import TestComponent from '../components/TestComponent.astro';
const enviroment: "dev" | "prod" = "dev";
---
<!-- note how removing the slash from the string below fixes the error -->
<TestComponent text={`${enviroment === "dev" ? `Test / Development` : "Production"} text`} />

Error message:

Error: Transform failed with 1 error:
/home/projects/github-sw4whj-uv9buh/src/pages/index.astro:27:219: error: Expected "}" but found ")"
    at failureErrorWithLog (/home/projects/github-sw4whj-uv9buh/node_modules/esbuild/lib/main.js:1493:15)
    at eval (/home/projects/github-sw4whj-uv9buh/node_modules/esbuild/lib/main.js:1282:29)
    at eval (/home/projects/github-sw4whj-uv9buh/node_modules/esbuild/lib/main.js:629:9)
    at handleIncomingPacket (/home/projects/github-sw4whj-uv9buh/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/projects/github-sw4whj-uv9buh/node_modules/esbuild/lib/main.js:596:7)
    at Socket.EventEmitter.emit (https://github-sw4whj-uv9buh.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:126633)
    at addChunk (https://github-sw4whj-uv9buh.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:508416)
    at readableAddChunk (https://github-sw4whj-uv9buh.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:508137)
    at Socket.Readable.push (https://github-sw4whj-uv9buh.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:508804)
    at _0x212164.onStreamRead [as onread] (https://github-sw4whj-uv9buh.w.staticblitz.com/blitz.d4ed89204e54de5c40d109298317e6dc4d60aef7.js:6:535934)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-sw4whj-uv9buh?file=src/pages/index.astro

πŸ› BUG: Tables are rendered incorrectly when using variables (0.21.11)

What version of astro are you using?

0.21.11

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Table rendering behaves unpredictably once variables are used.
It's hard to describe, please check the StackBlitz example.

Probably related to withastro/astro#2069

❌ Breaks the table

<table>
    <tr>
        <td>
            <h2>Row 1</h2>
        </td>
        <td>
            {title}
        </td>
    </tr>

    <tr>
        <td>
            <h2>Row 2</h2>
        </td>
        <td>
            Some content
        </td>
    </tr>
</table>

βœ… Works fine

<table>
    <tr>
        <td>
            <h2>Row 1</h2>
        </td>
        <td>
            Static content
        </td>
    </tr>

    <tr>
        <td>
            <h2>Row 2</h2>
        </td>
        <td>
            Some content
        </td>
    </tr>
</table>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-kqjpxb?file=src/pages/index.astro

πŸ› BUG: grid-template-* with [line-name] adds extra astro class

What version of astro are you using?

^0.21.10

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When adding grid-template-columns in a style tag with line-names, like this:

grid-template-columns: [content-start] 1fr [content-end];

an extra .astro class is entered into the style value, generating this:

grid-template-columns: .astro-4D2SJCT3[content-start] 1fr [content-end]

which is invalid CSS.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-rfg3sg?file=src/components/Tour.astro

πŸ› BUG: Self closing <i/> tags duplicate depending on the context

What version of @astrojs/compiler are you using?

0.9.2

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

When using a self closing <i/> tag, the tag duplicates for what seems to be each indentation level above itself. Using too many of these tags quickly results in a crash.

To see what is happening, right click > view frame source on the stackblitz to see the source html, or see the following code blocks

Input

<body>
	<div class="div1">
		<div class="div2">
			<div class="div3">
				<i class='i1' />
			</div>
		</div>
	</div>

	<div class="div4">
		<div class="div5">
			<div class="div6">
				<i class='i2' />
			</div>
		</div>
	</div>

	<div class="div7">
		<div class="div8">
			<div class="div9">
				<i class='i3' />
			</div>
		</div>
	</div>

	<div class="div10">
		<div class="div11">
			<div class="div12">
				<i class='i4' />
			</div>
		</div>
	</div>

</body>

Output

<body>
	
	<div class="div1 astro-FUZDCGGA">
		<div class="div2 astro-FUZDCGGA">
			<div class="div3 astro-FUZDCGGA">
				<i class="i1 astro-FUZDCGGA"></i><i class="i1 astro-FUZDCGGA">
			</i></div><i class="i1 astro-FUZDCGGA">
		</i></div><i class="i1 astro-FUZDCGGA">
	</i></div><i class="i1 astro-FUZDCGGA">

	<div class="div4 astro-FUZDCGGA">
		<div class="div5 astro-FUZDCGGA">
			<div class="div6 astro-FUZDCGGA">
				<i class="i2 astro-FUZDCGGA"></i><i class="i2 astro-FUZDCGGA">
			</i></div><i class="i2 astro-FUZDCGGA">
		</i></div><i class="i2 astro-FUZDCGGA">
	</i></div><i class="i2 astro-FUZDCGGA">

	<div class="div7 astro-FUZDCGGA">
		<div class="div8 astro-FUZDCGGA">
			<div class="div9 astro-FUZDCGGA">
				<i class="i3 astro-FUZDCGGA"></i><i class="i3 astro-FUZDCGGA">
			</i></div><i class="i3 astro-FUZDCGGA">
		</i></div><i class="i3 astro-FUZDCGGA">
	</i></div><i class="i3 astro-FUZDCGGA">

	<div class="div10 astro-FUZDCGGA">
		<div class="div11 astro-FUZDCGGA">
			<div class="div12 astro-FUZDCGGA">
				<i class="i4 astro-FUZDCGGA"></i><i class="i4 astro-FUZDCGGA">
			</i></div><i class="i4 astro-FUZDCGGA">
		</i></div><i class="i4 astro-FUZDCGGA">
	</i></div><i class="i4 astro-FUZDCGGA">

	</i></i></i></i>
 </body>

Link to Minimal Reproducible Example

https://stackblitz.com/github/snowjambi/i-tag-duplication?file=src%2Fpages%2Findex.astro

πŸ› BUG: Sourcemaps seem off

What version of @astrojs/compiler are you using?

0.31.1

What package manager are you using?

pnpm

What operating system are you using?

mac

Describe the Bug

Looks like we have some regressions in our source maps, this is what I'm seeing on main using the direct output of our cachedCompilation() method (result.code).

Link to Minimal Reproducible Example

blog-multiple-authors Demo

πŸ› BUG: Calling any function with the name `export` causes a panic

What version of @astrojs/compiler are you using?

0.11.4

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

The following code in an .astro file:

const foo = null;
foo.export();

causes a panic:

panic: Export statements must be placed at the top of .astro files!

goroutine 9 [running]:
github.com/withastro/compiler/internal/printer.render1(0x4b9ab8, 0x4ea960, {0x0, 0x0, 0x1, 0x0, {{0x410c60, 0x8}, {0x410c30, 0x8}, ...}})
        github.com/withastro/compiler/internal/printer/print-to-js.go:159 +0x540
github.com/withastro/compiler/internal/printer.render1(0x4b9ab8, 0x4ea870, {0x1, 0x0, 0x0, 0x0, {{0x410c60, 0x8}, {0x410c30, 0x8}, ...}})
        github.com/withastro/compiler/internal/printer/print-to-js.go:100 +0x33
github.com/withastro/compiler/internal/printer.printToJs(0x4b9ab8, 0x4ea870, 0x0, {{0x410c60, 0x8}, {0x410c30, 0x8}, {0x48c5a0, 0x50}, {0x4541f8, ...}, ...})
        github.com/withastro/compiler/internal/printer/print-to-js.go:75 +0x2
github.com/withastro/compiler/internal/printer.PrintToJS({0x4e4e00, 0x350}, 0x4ea870, 0x0, {{0x410c60, 0x8}, {0x410c30, 0x8}, {0x48c5a0, 0x50}, ...})
        github.com/withastro/compiler/internal/printer/print-to-js.go:50 +0xc
main.Transform.func1.1.1(0x45b220, {0x4e4e00, 0x350}, {{}, 0x7ff8000400000042, 0x410ce0})
        ./astro-wasm.go:230 +0x53
created by main.Transform.func1.1
        ./astro-wasm.go:153 +0x3

This seems to be because the HasExports() function is overly zealous in declaring any export token as a JS export.

Link to Minimal Reproducible Example

(cannot reproduce through stackblitz or codesandbox)

πŸ› BUG: Component slots in markdown pages throw an error

What version of @astrojs/compiler are you using?

0.14.1

What package manager are you using?

pnpm

What operating system are you using?

mac

Describe the Bug

Ran into a build error when upgrading astro.build to [email protected]. Narrowed it down to component slots being used in two markdown pages

<!-- src/pages/blog/introducing-astro.md -->
<Blockquote>
  <Fragment slot="quote">
    A well-designed system makes it easy to do the right things and annoying (but not impossible) to do the wrong things
  </Fragment>

  <Fragment slot="cite">Jeff Atwood, <a href="https://blog.codinghorror.com/falling-into-the-pit-of-success/">Falling Into The Pit of Success</a></Fragment>
</Blockquote>

Error message

panic: Element with a slot='...' attribute must be a child of a component or a descendant of a custom element

goroutine 124 [running]:
github.com/withastro/compiler/internal/printer.render1(0x5f9b08, 0x57f860, {0x0, 0x0, 0x3, 0x0, {{0x673e40, 0x8}, {0x4b05f0, 0x4f}, ...}})
	github.com/withastro/compiler/internal/printer/print-to-js.go:409 +0x533

Link to Minimal Reproducible Example

https://github.com/withastro/astro.build/tree/chore/astro-0.26

πŸ› BUG: Escaped {} within nested JSX fragment

What version of astro are you using?

0.25.4

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

JSX fragments seem to confuse the compiler somehow. This (pseudo)code causes the {label ? ...} to be escaped and renders as plain text instead of evaluating the code.

---
// const sections = [ ... ];
---
<div>
  {sections.map(({ label, items }) => (
    <>
      {label ? "truthy" : "falsy"}
	  <span>another element</span>
    </>
  ))}
</div>

Results in:

{label ? "truthy" : "falsy"}
another element
{label ? "truthy" : "falsy"}
another element

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-bpawmn?file=src/components/Sidebar.astro

Participation

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

πŸ› BUG: Component consisting of a table row (tr) tag doesn't render correctly

What version of astro are you using?

0.25.4

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

An Astro component template consisting of a table row (<tr>...</tr>) renders without the <tr> and <td> tags. This component:

---
const { foo } = Astro.props;
---
<tr>
  <td>col 1</td>
  <td>col 2</td>
  <td>{foo}</td>
</tr>

Does not render correctly.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-oixe5g?file=src/pages/index.astro

Participation

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

πŸ› BUG: memory access out of bounds with KaTeX

What version of astro are you using?

0.22.19

What package manager are you using?

npm, yarn

What operating system are you using?

Linux

Describe the Bug

When using markdown and installing katex, remark-math and rehype-katex, some math equations throws a wasm error: memory access out of bounds. Specifically, some functions like \frac{1}{2}, or \sqrt[3]{27} (interestingly, \sqrt{4} doesn't throw)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-vrzdws?file=src/pages/index.md

Bug track: nil pointer dereference

UPDATE: PLEASE READ

This issue appears to have been caused by TinyGo. Instead of attempting to fix the bug in TinyGo, and after even more issues were caused by an upgrade of TinyGo, the decision has been made to switch to the standard Go compiler. This is at the cost of an additional 3mb, but should significantly improve stability and memory safety.

Due to the nature of this bug that makes it hard to reproduce (randomly stops and starts happening) this issue will remain open for a period of time.

This change has been released in [email protected]. Please upgrade to that version!

IF YOU ARE ON THE LASTEST ASTRO VERSION AND ARE EXPERIENCING THIS ISSUE, IT IS CRITICAL YOU LET US KNOW

What operating system are you using?

Linux

Describe the Bug

Recently, a wave of support threads in discord have been created discussing an issue. It has been impossible to reproduce, as it only occurs on certain linux devices. Known platforms issue may occur on

  • some devices running Arch Linux
  • Cloudflare
  • Netlify
  • Vercel

(note, using one of these platforms is not enough to trigger this bug, there are other unknown conditions that lead it to work on some devices but not others)


The following related errors can be experienced based on the contents of a file:

wasm://wasm/0027!!!!!:1
RuntimeError: null function or function signature mismatch
    at wasm://wasm/00273ac2:wasm-function[293]:0x135!!
    at wasm://wasm/00273ac2:wasm-function[300]:0x142!!
    at Go._resume (file:///home/evan/.local/share/pnpm-global/5/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/compiler/node/wasm_exec.js:374:28)
    at file:///home/evan/.local/share/pnpm-global/5/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/compiler/node/wasm_exec.js:384:16
    at new Promise (<anonymous>)
    at syscall/js.valueNew (file:///home/evan/.local/share/pnpm-global/5/node_modules/.pnpm/@[email protected]/node_modules/@astrojs/compiler/node/wasm_exec.js:274:54)
    at wasm://wasm/0027!!!!:wasm-function[321]:0x155!!
    at wasm://wasm/0027!!!!:wasm-function[821]:0x6!!!!
    at wasm://wasm/0027!!!!:wasm-function[293]:0x135!!
    at wasm://wasm/0027!!!!:wasm-function[300]:0x142!!

(note: ! indicates inconsistencies between reports)

RuntimeError: Error: Uh oh, the Astro compiler encountered an unrecoverable error!

Most common!

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

Working versions are also inconsistent. In my testing, I found the following astro versions

  • 0.22.14
  • 0.22.3
  • <0.22.1
  • Going from 0.22.15 -> 0.22.16 breaks the compiler, then downgrading to 0.22.15 does not fix it. The only way to fix it is to downgrade to 0.22.3 than upgrade to 0.22.15.

to be the working versions, however in #252 it was reported that those versions were not working and the working version of astro was 0.21.13

@johnnytest4real reports 0.22.14 to be broken however, and says his magic version is 0.22.11

@Princesseuh says (nooo, contrary to my experience) that 0.22.16 was working and 0.22.20 is broken

@adamdbradley was the first victim of this issue on vercel, when he was running ^23.0-next.1


These related bugs all seem to relate to the bytes in a given file, but it is not yet understood what exactly causes it. The common theory is the size of the file: in my case and one of the discord user's cases

  • Removing/Adding characters sometimes fixes the issue
  • Hotswapping them never fixes the issue

Here is a video of this

https://i.boehs.org/raw/astrobeingmean1.mp4

and @jonathantneal describing further https://canary.discord.com/channels/830184174198718474/931317508609282121/931359293603741757

...

Others think it may have to do with unicode handling, like πŸ—¨οΈ emojis (hi @jonathantneal ;)). @Princesseuh says that removing her emojis (rip emojis) fixed it.


This bug is hard to fix because it's hard to track down. Please report additional information in the comments, this issue will be kept up to date as new information arives


Linked:

Link to Minimal Reproducible Example

If anyone manages to reproduce this I will hug them and break into tears

πŸ› BUG: Broken <table> behaviour

What version of astro are you using?

0.25.4

What package manager are you using?

yarn

What operating system are you using?

Linux

Describe the Bug

<tr>, <tbody>, <thead> and <td> elements are being stripped out of the markup.

Looking into issues I found that withastro/astro#2331 had solved this in 0.24 but I am witnessing a similar behavior

Link to Minimal Reproducible Example

https://codesandbox.io/s/adoring-blackwell-kc0pvv

Participation

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

πŸ› BUG: Nesting At-Rules break all proceeding CSS

What version of astro are you using?

0.21.10

What package manager are you using?

npm

What operating system are you using?

Mac, Linux

Describe the Bug

Nesting at-rules as described in the 2013 CSS Syntax specification, the latest CSS Syntax specification, and the current CSS Nesting specification break all proceeding CSS in a <style> block.

I have also filed an issue with the dependency that I believe to be causing this.

Given the following HTML, what do you expect is the text color of the body, and what do you expect is the background color of the body?

<style>
/* CSS Example 1 */
body { @media (min-width: 640px) { color: blue } }
body { background-color: pink }
</style>

You should expect the body text to be blue when either the framework or browser supports CSS nesting, and you should expect the body background to definitely be pink. This is observable on CodePen, whether you enable PostCSS tooling or not.

Now, given the following similar HTML, what do you expect?

<style>
/* CSS Example 2 */
:global(html) { @media (min-width: 640px) { color: blue } }
html { background-color: lime }
</style>

You should expect the answers to be the same (substituting body for html), as long as the framework supports :global.

However, the background is never pink nor lime, the text is never blue, and none of these declarations are ever actually rendered.

<styleΒ astro-style="true">/* CSS Example 2 */html{@media(min-width:640px){</style>
<styleΒ astro-style="true">/* CSS Example 1 */body{@media(min-width:640px){</style>

The curious ordering aside, it appears the handler for CSS quietly gives up parsing the rest of the stylesheet.

Possible Solutions

I would like to suggest a minimal solution, a preferable solution, and an ideal solution. Let me be clear that these are my own personally-ranked suggestions.

I believe a minimal solution would be to support the behavior described in the 2013 specification. This means a nesting at-rule would be consumed, and its contents would be printed as-is, with no scoping applied.

I believe a preferable solution would be to support the behavior described in the 2021 specifications. This means all nesting rules would be consumed, and any selectors would have the appropriate scoping applied.

I believe an ideal solution would be to support the behavior described in the 2021 specifications, with some additional ability to transform the nesting into pre-nesting-compatible code.

Again, these are my own personally-ranked suggestions.

Alternative Solutions

If is not feasible to fix the upstream CSS parser, then as an alternative I would suggest Astro warn authors whenever an error from the CSS parser is thrown.

I appreciate that Astro does not throw for CSS or HTML. It’s very web-like, and I like it.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-77dfin?file=src/pages/index.astro

πŸ› BUG: grid-template-* with [line-name] adds extra astro class

What version of astro are you using?

^0.21.10

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When adding grid-template-columns in a style tag with line-names, like this:

grid-template-columns: [content-start] 1fr [content-end];

an extra .astro class is entered into the style value, generating this:

grid-template-columns: .astro-4D2SJCT3[content-start] 1fr [content-end]

which is invalid CSS.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-rfg3sg?file=src/components/Tour.astro

πŸ› BUG: Spreading props onto components without surrounding brackets is ignored

What version of @astrojs/compiler are you using?

0.12.1

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

<SEO ...seo /> is treated as a no-op, no build error but the props aren't passed down

It's actually pretty cool that this doesn't break the compiler, I could see it either -

(a) working the same as <SEO {...seo} />
(2) breaking the build with a helpful "did you mean?" type of error message
(d) logging a warning with a helpful message (though might be easy for the dev to miss)

Toss this one in the "quality of life" pile, it's not really a bug so much as a DX win

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-fyfsm4-1fr8rw

πŸ› BUG: cloudflare page build error after upgrade

What version of astro are you using?

0.22.13

What package manager are you using?

yarn

What operating system are you using?

Cloudflare pages (NODE 16.13.1)

Describe the Bug

I upgraded Astro recently and run into this issue in cloudflare pages. I attempted to recreate using a initial template but cannot reproduce.


export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.17.linux.amd64';
--
06:58:17.227 | export PATH="/opt/buildhome/.gimme_cache/versions/go1.17.linux.amd64/bin:${PATH}";
06:58:17.227 | go version >&2;
06:58:17.227 | Β 
06:58:17.229 | export GIMME_ENV="/opt/buildhome/.gimme_cache/env/go1.17.linux.amd64.env"
06:58:17.233 | go version go1.17 linux/amd64
06:58:17.234 | Installing missing commands
06:58:17.234 | Verify run directory
06:58:17.234 | Executing user command: yarn run build
06:58:17.386 | yarn run v1.22.17
06:58:17.417 | $ astro build
06:58:19.217 | wasm://wasm/00274c5e:1
06:58:19.217 | Β 
06:58:19.217 | Β 
06:58:19.217 | RuntimeError: null function or function signature mismatch
06:58:19.217 | at wasm://wasm/00274c5e:wasm-function[293]:0x1354b
06:58:19.217 | at wasm://wasm/00274c5e:wasm-function[300]:0x14272
06:58:19.217 | at Go._resume (file:///opt/buildhome/repo/node_modules/@astrojs/compiler/node/wasm_exec.js:374:28)
06:58:19.217 | at file:///opt/buildhome/repo/node_modules/@astrojs/compiler/node/wasm_exec.js:384:16
06:58:19.217 | at new Promise (<anonymous>)
06:58:19.217 | at syscall/js.valueNew (file:///opt/buildhome/repo/node_modules/@astrojs/compiler/node/wasm_exec.js:274:54)
06:58:19.217 | at wasm://wasm/00274c5e:wasm-function[321]:0x155e3
06:58:19.217 | at wasm://wasm/00274c5e:wasm-function[821]:0x6c104
06:58:19.217 | at wasm://wasm/00274c5e:wasm-function[293]:0x1354b
06:58:19.217 | at wasm://wasm/00274c5e:wasm-function[300]:0x14272
06:58:19.422 | error Command failed with exit code 1.
06:58:19.422 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
06:58:19.431 | Failed: build command exited with code: 1

</pre><div class="c_yq c_c" style="box-sizing: border-box; display: flex; padding: 32px;"><button type="button" class="c_ll c_lm c_ln c_lo c_lp c_lq c_lr c_ls c_lt c_lu c_lv c_lw c_lx c_ly c_ab c_r c_s c_kt c_fg c_eq c_lz c_ma c_mb c_mc c_gh c_gj c_md c_me c_mf c_mg c_mh c_mi c_mj c_mk c_m c_t c_ml c_mm c_mn c_aq c_mo c_mp c_bf c_ig c_em c_ih c_hn c_bl c_bh c_go c_gp c_mq c_mr c_ms c_ff c_fv c_mt" style="box-sizing: border-box; font-size: 14px; font-family: -apple-system, system-ui, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Helvetica Neue&quot;, Arial, sans-serif; border: 0px solid currentcolor; position: relative; align-items: center; -webkit-box-align: center; justify-content: center; -webkit-box-pack: center; text-align: center; cursor: pointer; user-select: none; white-space: nowrap; padding: 8px 16px; margin: 0px 0px 0px auto; line-height: 1.2; font-weight: 400; display: inline-flex; border-radius: 5px; opacity: inherit; pointer-events: auto; transition-property: background-color, border-color, color; transition-duration: 200ms; transition-timing-function: ease; max-width: initial; float: none; background-color: rgb(0, 81, 195); color: rgb(242, 242, 242); width: auto;"><span style="box-sizing: border-box;">Retry deployment</span></button></div></div></div></div></div></main><footer class="c_b c_hk c_hl c_bl c_bh c_hm c_gi c_gj c_gf" style="box-sizing: border-box; background-color: rgb(255, 255, 255); padding: 32px 16px; border-color: rgb(217, 217, 217); border-top-width: 1px; border-top-style: solid; margin-top: 32px; color: rgb(49, 49, 49); font-family: -apple-system, system-ui, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, &quot;Helvetica Neue&quot;, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="c_hn c_ho c_c c_hp c_hq" style="box-sizing: border-box; display: flex; margin-left: auto; margin-right: auto; max-width: 64rem; flex-wrap: wrap;"><div class="c_gq c_hr c_hs c_ht" style="box-sizing: border-box; margin-bottom: 16px; width: 204.797px;"><dl class="c_cc c_ff c_hu" style="box-sizing: border-box; list-style: none; margin-left: 0px; font-size: 14px;"><br class="Apple-interchange-newline">

Link to Minimal Reproducible Example

Try to reproduce with a new astro site and no luck :(

πŸ› BUG: Variables in markdown don't get picked up if standing alone in a line

What version of astro are you using?

0.22.20

What package manager are you using?

npm

What operating system are you using?

macOS 12.1

Describe the Bug

If you have a variable in the content of a .md file that is "alone" on a line, it doesn't get picked up by the compiler:

Works: Do variables work: {frontmatter.value}
Does not work: {frontmatter.value}

To reproduce you can look at the rendered content of this index.md page:
https://stackblitz.com/edit/github-5wquax?file=src/pages/posts/index.md

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-5wquax

πŸ› BUG: scripts with a src prop and a prop with a value of true are hidden from the build output when using a js component

What version of astro are you using?

latest

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

Script tags with a src prop and a prop with either "true", true or {true} as the value are hidden in the build output when using a js component in the page such as a react or svelte component.
Without having gone too deep into the technical side of astro, i suspect that the issue is with rendering scripts in the SCRIPTS array created by this part of the compiler, it looks like scripts without a src prop that are passed into that array are all fine and get added to the last part of the head in the output file while scripts with a src prop never get added when a frontend framework is used in the page (More info here)
I am sure that there is much more to this bug than I have been able to find, but it looks like one of the props have to be src while the other can be named whatever you want, just as long as it has one of the values mentioned above.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-icwr81?file=src%2Fpages%2Findex.astro&on=stackblitz

πŸ› BUG: Compiler error links invalid due to issue forms

What version of astro are you using?

0.22.1

What package manager are you using?

pnpm

What operating system are you using?

linux

Describe the Bug

Compiler bugs instruct users to open an issue, but the prefill does not work because of issue forms. Also, they remove flexibility when opening an issue, such as below where a MRE is not needed

Link to Minimal Reproducible Example

n/a

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.