withastro / compiler Goto Github PK
View Code? Open in Web Editor NEWThe Astro compiler. Written in Go. Distributed as WASM.
License: Other
The Astro compiler. Written in Go. Distributed as WASM.
License: Other
astro
are you using?0.22.19
npm, yarn
Linux
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)
https://stackblitz.com/edit/github-vrzdws?file=src/pages/index.md
astro
are you using?0.22.13
npm
MAC OSX
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.
https://stackblitz.com/edit/github-h3mvs5?file=src/pages/index.astro
astro
are you using?0.21.5
pnpm
Windows
<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.
https://codesandbox.io/s/cocky-http-o9il7?file=/src/pages/broken.astro
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
Linux
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
(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.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
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:
If anyone manages to reproduce this I will hug them and break into tears
astro
are you using?0.22.3
npm
Windows
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.
---
const items = ["Dog", "Cat", "Platipus"]
---
<table>
<tbody>
{items.map(item => (
<tr>
<td>{item}</td>
<td>{item}</td>
</tr>
))}
</tbody>
</table>
---
const items = ["Dog", "Cat", "Platipus"]
---
<table>
<tbody>
{items.map(item => (
<tr>
<td>{item}</td>
</tr>
))}
</tbody>
</table>
/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)
https://stackblitz.com/edit/github-c258bg?file=src/pages/index.astro
astro
are you using?0.21.13
npm
Mac
Any components in a <noscript>
tag only pass in the source code. It does not get parsed through the compiler.
https://stackblitz.com/edit/github-8nksfd?file=src/pages/index.astro
astro
are you using?0.22.13
npm
Windows
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!
https://stackblitz.com/edit/github-kmp3ni-fqobhy?file=src/pages/index.astro
@astrojs/compiler
are you using?0.9.2
npm
Windows
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>
https://stackblitz.com/github/snowjambi/i-tag-duplication?file=src%2Fpages%2Findex.astro
astro
are you using?0.22.13
yarn
Cloudflare pages (NODE 16.13.1)
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, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", 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, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", 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">
Try to reproduce with a new astro site and no luck :(
astro
are you using?0.21.10
npm
Mac, Linux
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.
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.
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.
https://stackblitz.com/edit/github-77dfin?file=src/pages/index.astro
npm
Mac
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`);
^
git clone [email protected]:amatiasq/astro-bug-arrow-expected.git
cd astro-bug-arrow-expected
npm i
npm start
It should render an HTML with ({})
[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)
astro
are you using?0.25.0-next.3
npm
Stackblitz
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.
https://stackblitz.com/edit/github-39j8qw?file=src%2Fpages%2Findex.astro&on=stackblitz
astro
are you using?latest
yarn
Windows
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.
https://stackblitz.com/edit/github-icwr81?file=src%2Fpages%2Findex.astro&on=stackblitz
astro
are you using?0.21.10
yarn
Mac
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.
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.
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;
}
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%;
}
}
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.
https://codesandbox.io/s/clever-jennings-xlp4z?file=/src/pages/index.astro
astro
are you using?0.23.0-next.6
npm
Mac
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
astro
are you using?^0.23.0
yarn
Windows
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
https://stackblitz.com/edit/github-fkkg12-wtamny?file=src%2Fpages%2Findex.astro&on=stackblitz
astro
are you using?0.25.4
yarn
Linux
<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
https://codesandbox.io/s/adoring-blackwell-kc0pvv
@astrojs/compiler
are you using?0.12.1
npm
Mac
<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
@astrojs/compiler
are you using?0.7.4
npm
Linux
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
https://stackblitz.com/edit/github-3bqujt-lpwy6r?file=src%2Fpages%2Findex.astro
astro
are you using?0.22.18
npm
Mac
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>}
https://stackblitz.com/edit/github-anjyep?file=src%2Fpages%2Findex.astro&on=stackblitz
@astrojs/compiler
are you using?0.31.1
pnpm
mac
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
).
astro
are you using?0.21.6
npm
Windows
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.
astro
are you using?0.22.1
pnpm
linux
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
n/a
astro
are you using?0.25.4
yarn
Windows
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.
https://stackblitz.com/edit/github-oixe5g?file=src/pages/index.astro
@astrojs/compiler
are you using?0.11.4
yarn
Windows
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.
(cannot reproduce through stackblitz or codesandbox)
@astrojs/compiler
are you using?v22.20
yarn
wsl2; ubuntu 20.04
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,
https://codesandbox.io/s/vigorous-platform-p2jtq?file=/src/components/ProblemChild.astro
pnpm
Linux
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:
<img src={img} />
with <img src={img}></img>
.{
in a brace is incoming {
{
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 {
npm init astro
using any templatenpm install astro@next--compiler
No response
astro
are you using?^0.21.10
npm
Mac
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.
https://stackblitz.com/edit/github-rfg3sg?file=src/components/Tour.astro
astro
are you using?0.22.14
pnpm
Windows
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)
https://stackblitz.com/edit/github-sw4whj-uv9buh?file=src/pages/index.astro
astro
are you using?0.22.6
pnpm
macOS Monterey 12.1
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.
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.
@astrojs/compiler
are you using?0.12.0-next.8
yarn
Windows
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.
https://stackblitz.com/edit/github-8jjhc4?file=src%2Fpages%2Findex.astro&on=stackblitz
astro
are you using?0.21.13
npm
Mac
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. π
astro
are you using?0.21.11
npm
Mac
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 π€
astro
are you using?0.25.2
yarn
Linux
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"
.
@astrojs/compiler
are you using?0.8.2
npm, yarn
Mac, Windows, Linux
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!
@astrojs/compiler
are you using?0.14.1
pnpm
mac
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
https://github.com/withastro/astro.build/tree/chore/astro-0.26
@astrojs/compiler
are you using?0.0.0
all
all
As raised by @gluck in withastro/astro#2166, this repo and packages are missing a LICENSE! We gotta add 'em.
astro.new
@astrojs/compiler
are you using?(Whatever goes with Astro 1.0.0-beta.2)
npm
macOS 12.3.1
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
https://stackblitz.com/edit/github-9skgk5 (see the Index.astro
file).
astro
are you using?^0.21.10
npm
Mac
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.
https://stackblitz.com/edit/github-rfg3sg?file=src/components/Tour.astro
@astrojs/compiler
are you using?0.5.7
yarn
Ubuntu
Can't loop/map over an array inside {<style><style>
}. It outputs the following error:
https://stackblitz.com/edit/github-vzgf3w?file=src%2Fpages%2Findex.astro
astro
are you using?0.25.4
yarn
Windows
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>)}
https://stackblitz.com/edit/github-rztbls?file=src/pages/index.astro
astro
are you using?0.23.0-next.6
npm
Mac
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
astro
are you using?0.22.1
npm
Mac
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)
https://stackblitz.com/edit/github-zbqlea?file=src/components/input.astro
astro
are you using?0.23.2
pnpm
Mac
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)
astro
are you using?0.22.20
yarn
Mac
If a regex contain a backslash (e.g. ''.replace(/\.$/, '')
) and appears in getStaticPaths
, the compiler will become stuck.
https://stackblitz.com/edit/github-d9k1ys
Open the example and go to /hello
to trigger the bug
astro
are you using?0.22.20
npm
macOS 12.1
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
astro
are you using?0.25.4
npm
Windows
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
https://stackblitz.com/edit/github-bpawmn?file=src/components/Sidebar.astro
@astrojs/compiler
are you using?0.5.7
yarn
Ubuntu
I am facing the following error when trying to set (height * 100) / width
as the value of any attribute.
And this error when used inside an element,
https://stackblitz.com/edit/github-hua66y?file=src%2Fpages%2Findex.astro
astro
are you using?0.21.11
npm
Mac
Table rendering behaves unpredictably once variables are used.
It's hard to describe, please check the StackBlitz example.
Probably related to withastro/astro#2069
<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>
<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>
https://stackblitz.com/edit/github-kqjpxb?file=src/pages/index.astro
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.