Pretty weird bug around looping
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 46
- Avg merge
- 10m
- Merged PRs (30d)
- 2
Description
I have the webc code:
<div class='post' webc:for="child of tocData.children">
<div>
<div @text="JSON.stringify(Object.keys(child))"/>
<a :href="`#${child.anchor}`" @text="child.text" />
</div>
</div>
This works, and has that div with debugging data in it. If I remove that line and this becomes:
<div class='post' webc:for="child of tocData.children">
<div>
<a :href="`#${child.anchor}`" @text="child.text" />
</div>
</div>
Then it breaks:
[11ty] Wrote 4 files in 2.18 seconds (544.9ms each, v4.0.0-alpha.6)
[11ty] Eleventy Fatal Error (CLI):
[11ty] 1. Having trouble writing to "./_site/docs/search/index.html" from "./src/docs/search.njk" (via EleventyTemplateError)
[11ty] 2. (./src/_includes/layouts/main.njk)
[11ty] EleventyNunjucksError: Error with Nunjucks paired shortcode `renderTemplate` (via Template render error)
[11ty] 3. Evaluating a dynamic attribute failed: `:href="`#${child.anchor}`"`.
[11ty] Original error message: Cannot read properties of undefined (reading 'anchor')
[11ty] 4. Cannot read properties of undefined (reading 'anchor') (via TypeError)
[11ty]
[11ty] Original error stack trace: TypeError: Cannot read properties of undefined (reading 'anchor')
[11ty] at Object.default (data:text/javascript;charset=utf-8,export%20default%20function(%7B%20child%20%7D)%20%7B%20return%20%60%23%24%7Bchild.anchor%7D%60%20%7D%3B:1:55)
[11ty] at file:///Users/tmcw/s/11ty-website/node_modules/@11ty/webc/src/attributeSerializer.js:197:15
[11ty] at process.processTicksAndRejections (node:internal/process/task_queues:103:5)
[11ty] at async AttributeSerializer.evaluateAttribute (file:///Users/tmcw/s/11ty-website/node_modules/@11ty/webc/src/attributeSerializer.js:191:21)
[11ty] at async Promise.all (index 0)
[11ty] at async AstSerializer.renderStartTag (file:///Users/tmcw/s/11ty-website/node_modules/@11ty/webc/src/ast.js:477:29)
[11ty] at async AstSerializer.compileNode (file:///Users/tmcw/s/11ty-website/node_modules/@11ty/webc/src/ast.js:1185:55)
[11ty] at async AstSerializer.getChildContent (file:///Users/tmcw/s/11ty-website/node_modules/@11ty/webc/src/ast.js:369:56)
[11ty] at async AstSerializer.compileNode (file:///Users/tmcw/s/11ty-website/node_modules/@11ty/webc/src/ast.js:1279:36)
[11ty] at async AstSerializer.getChildContent (file:///Users/tmcw/s/11ty-website/node_modules/@11ty/webc/src/ast.js:369:56)
It also breaks if I switch from self-closing to <div></div> syntax for the debugging line.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the failure from src/docs/search.njk through layouts/main.njk, first checking the loop and dynamic href without the debugging binding. Then inspect attributeSerializer.js around evaluateAttribute and ast.js around renderStartTag and compileNode. Done means the loop renders the link correctly with either debugging-line syntax and without an undefined child error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100