11ty / 11ty/webc

Pretty weird bug around looping

Open
#239 1 comment 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.