Invalid or unexpected token "(((11ty(((permalink)))11ty)))" thrown in moduleScript.evaluateScript

[FranciscoG]

I've been having some weird issues building my site. I'm trying to use WebC as much as possible, ideally I'd like to get rid of my remaining nunjucks code but I'm finding that difficult.

So when I build my site I keep seeing this error.

[11ty] 1. Having trouble writing to "false" from "./content/blog/css-only-theme-switcher.md" (via EleventyTemplateError)
[11ty] 2. Cannot read properties of undefined (reading 'url') (via TypeError)
[11ty]
[11ty] Original error stack trace: TypeError: Cannot read properties of undefined (reading 'url')
[11ty]     at Object.addContent (~/node_modules/@11ty/eleventy-plugin-bundle/eleventy.shortcodes.js:24:39)
[11ty]     at Object.css (~/node_modules/@11ty/eleventy/src/BenchmarkGroup.js:32:26)
[11ty]     at Object.<anonymous> (~/node_modules/@11ty/eleventy-plugin-webc/src/eleventyWebcTemplate.js:155:37)
[11ty]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[11ty]     at async TemplateLayout.render (~/node_modules/@11ty/eleventy/src/TemplateLayout.js:236:25)
[11ty]     at async Template.renderPageEntry (~/node_modules/@11ty/eleventy/src/Template.js:793:17)
[11ty]     at async ~/node_modules/@11ty/eleventy/src/Template.js:822:21
[11ty]     at async Promise.all (index 0)
[11ty]     at async Promise.all (index 4)
[11ty]     at async Eleventy.executeBuild (~/node_modules/@11ty/eleventy/src/Eleventy.js:1191:13)

So I ran the build in debug mode and I started to see this error for every single page:

Error evaluating dynamic permalink, returning raw string contents instead: '(((11ty(((permalink)))11ty)))'

I grepped through the @11ty code in nod_modules and found that this debug message was coming from here: https://github.com/11ty/eleventy-plugin-webc/blob/main/src/eleventyWebcTemplate.js#L89

The error was specifically being thrown in here line 83 above it where moduleScript.evaluateScript() is called

So I looked for that function and found the source of it here: https://github.com/11ty/webc/blob/main/src/moduleScript.cjs#L55

I added some console logs there to see what was the value of the arguments being passed to evaluateScript and this is what I'm seeing

content = (((11ty(((permalink)))11ty)))

data = {"page":{"url":"(((11ty(((page.url)))11ty)))","outputPath":"(((11ty(((page.outputPath)))11ty)))"},"permalink":"(((11ty(((permalink)))11ty)))","eleventyExcludeFromCollections":"(((11ty(((eleventyExcludeFromCollections)))11ty)))"}

When I console logged the error being caught from line 66 I see this:

(((11ty(((permalink)))11ty)))
   ^^

SyntaxError: Invalid or unexpected token
    at new Script (node:vm:94:7)
    at ModuleScript.evaluateScript (~/node_modules/@11ty/webc/src/moduleScript.cjs:55:18)
    at Object.<anonymous> (~/node_modules/@11ty/eleventy-plugin-webc/src/eleventyWebcTemplate.js:83:49)
    at Template._renderFunction (~/node_modules/@11ty/eleventy/src/TemplateContent.js:405:27)
    at Template.renderPermalink (~/node_modules/@11ty/eleventy/src/TemplateContent.js:454:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Template._getLink (~/node_modules/@11ty/eleventy/src/Template.js:251:24)
    at async Template.getOutputHref (~/node_modules/@11ty/eleventy/src/Template.js:329:16)
    at async Object.<anonymous> (~/node_modules/@11ty/eleventy/src/Template.js:579:25)
    at async ComputedDataTemplateString.findVarsUsed (~/node_modules/@11ty/eleventy/src/ComputedDataTemplateString.js:55:16)

Here's the full code for my site that's producing the errors above: https://github.com/FranciscoG/franciscog.github.io/tree/redesign-2023