Permalink in Global Data doesn't work with custom template extension

[kari]

Operating system

macOS 15.2 (24C101)

Eleventy

3.0.0

Describe the bug

When using a permalink function in Global Data and a custom template extension (for example, the Sass one in docs), the permalink isn't properly rendered and causes an error. See Reproduction steps below for configuration which triggers this and the error it produces.

I tried to look into the error stack, and I think this happens because permalinkNeedsCompilationin src/Engines/Custom.js only looks if the template extension has compileOptions.permalink defined and this in turn breaks renderPermalink in src/Template.js which has correctly taken the permalink function from Global Data but uses (irrelevant and wrong) information from the template extension to decide what to do with it.

In a somewhat related (but not really) issue #2972 there is mentioned a workaround which doesn't work here and I guess surfaces another bug because if the template extension defines

compileOptions: {
  permalink(inputContent, inputPath) {
    return (data) => {
      return data.permalink
    }
  }
}

then what happens is that in src/TemplateContent.js _renderFunction only renders the above permalink function but doesn't check if the returned data.permalink is a string or (yet another) function and so we get the same error message and the permalink continues to be resolved as an anonymous function instead of its result.

Reproduction steps

Minimal eleventy.config.js with above linked examples from documentation and an empty style.scss file.

import sass from "sass";

export default async function(eleventyConfig) {
  // https://www.11ty.dev/docs/permalinks/#remove-trailing-slashes
  // Set global permalinks to resource.html style
	eleventyConfig.addGlobalData("permalink", () => {
		return (data) =>
			`${data.page.filePathStem}.${data.page.outputFileExtension}`;
	});

  // https://www.11ty.dev/docs/languages/custom/#example-add-sass-support-to-eleventy
  eleventyConfig.addTemplateFormats("scss");

  // Creates the extension for use
	eleventyConfig.addExtension("scss", {
		outputFileExtension: "css", // optional, default: "html"

		// uncomment for no effect
		// compileOptions: {
		// 	permalink(inputContent, inputPath) {
		// 		return (data) => {
		// 			return data.permalink
		// 		}
		// 	}
		// },

		// `compile` is called once per .scss file in the input directory
		compile: async function (inputContent) {
			let result = sass.compileString(inputContent);

			// This is the render function, `data` is the full data cascade
			return async (data) => {
				return result.css;
			};
		},
	});

}

npx @11ty/eleventy
[11ty] Problem writing Eleventy templates:
[11ty] link.slice is not a function (via TypeError)
[11ty]
[11ty] Original error stack trace: TypeError: link.slice is not a function
[11ty]     at TemplatePermalink._addDefaultLinkFilename (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/TemplatePermalink.js:68:23)
[11ty]     at TemplatePermalink.toOutputPath (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/TemplatePermalink.js:77:24)
[11ty]     at TemplatePermalink.toPath (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/TemplatePermalink.js:140:18)
[11ty]     at Template.getOutputLocations (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/Template.js:287:16)
[11ty]     at async Template.addComputedData (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/Template.js:581:25)
[11ty]     at async Template.getTemplates (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/Template.js:733:4)
[11ty]     at async TemplateMap.initDependencyMap (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/TemplateMap.js:376:18)
[11ty]     at async TemplateMap.cache (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/TemplateMap.js:425:3)
[11ty]     at async TemplateWriter._createTemplateMap (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/TemplateWriter.js:356:3)
[11ty]     at async TemplateWriter.generateTemplates (file:///Users/kari/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/TemplateWriter.js:386:3)
[11ty] Wrote 0 files in 0.11 seconds (v3.0.0)

or relevant part with debug

Eleventy:Template Rendering permalink for './style.scss': (data) =>
			`${data.page.filePathStem}.${data.page.outputFileExtension}` becomes [Function (anonymous)] +2ms

Expected behavior

Site compilation should succeed and style.scss should output as style.css

Reproduction URL

https://github.com/kari/eleventy-permalink-issue

Screenshots

No response

[zachleat]

This is likely a duplicate of #3472 have you tried npm install @11ty/eleventy@canary to see if that fixes your issue?

[kari]

Thanks! Running npm install @11ty/eleventy@canary does fix my main issue and is indeed duplicate of #3472, sorry about not finding that issue.

However, if I use the #2972 "workaround" with the dummy compileOptions.permalink I still get the link.slice is not a function (via TypeError) because the function returned (in data.permalink) by that is still not run (and then link.slice breaks because it expects link to be a string). Not sure how likely anyone is to be hit with this bug, though.