11ty errors with "link.slice is not a function" #3472

rmschindler · 2024-10-04T13:27:05Z

Operating system

macOS Sonoma 14.5

Eleventy

3.0.0

Describe the bug

having just upgraded to 3.0.0, my npx @11ty/eleventy --serve --port=8081 command produces the error:

[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/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/TemplatePermalink.js:68:23)
[11ty]     at TemplatePermalink.toOutputPath (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/TemplatePermalink.js:77:24)
[11ty]     at TemplatePermalink.toHref (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/TemplatePermalink.js:120:30)
[11ty]     at Template.getOutputHref (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/Template.js:310:15)
[11ty]     at async ComputedData._setupDataEntry (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/Data/ComputedData.js:95:15)
[11ty]     at async ComputedData.processRemainingData (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/Data/ComputedData.js:116:3)
[11ty]     at async ComputedData.setupData (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/Data/ComputedData.js:106:3)
[11ty]     at async Template.addComputedData (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/Template.js:563:4)
[11ty]     at async Template.getTemplates (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/Template.js:733:4)
[11ty]     at async TemplateMap.initDependencyMap (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/TemplateMap.js:376:18)
[11ty]     at async TemplateMap.cache (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/TemplateMap.js:425:3)
[11ty]     at async TemplateWriter._createTemplateMap (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/TemplateWriter.js:356:3)
[11ty]     at async TemplateWriter.generateTemplates (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/TemplateWriter.js:386:3)
[11ty]     at async TemplateWriter.write (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/TemplateWriter.js:434:21)
[11ty]     at async Eleventy.executeBuild (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/Eleventy.js:1345:19)
[11ty]     at async Eleventy.watch (file:///Users/rmschindler/Repos/notebook/node_modules/@11ty/eleventy/src/Eleventy.js:1155:3)
[11ty] Wrote 0 files in 1.24 seconds (v3.0.0)

Reproduction steps

reproduction: I don’t know how to reproduce this

Expected behavior

expected behaviour: well, no error

Reproduction URL

No response

Screenshots

No response

The text was updated successfully, but these errors were encountered:

rmschindler · 2024-10-04T14:38:04Z

I tried the different versions of 11ty, and found that with 3.0.0-alpha.12, it still worked; with 3.0.0-alpha.13 it stops working . (to be clear ‘worked’ means that the error isn’t produced)

tryoxiss · 2024-10-08T04:55:40Z

Happens for me too (fedora 40).

Seems to be related to JSX, as for me it only happens when I have eleventyConfig.addTemplateFormats("11ty.jsx,11ty.tsx"); in my config. Removing that line fixes it, but obviously isn't ideal.

rmschindler · 2024-10-08T23:59:16Z

this could be an important clue, @tryoxiss, as I also add a template format in my config:

eleventyConfig.addTemplateFormats("adoc");

zachleat · 2024-10-16T16:52:29Z

Definitely a bad error messaging issue. This is almost certainly due to a permalink value. Can you provide more information about the permalink value that might be influencing this? Or access to the code?

tryoxiss · 2024-10-16T18:56:27Z

Definitely a bad error messaging issue. This is almost certainly due to a permalink value. Can you provide more information about the permalink value that might be influencing this? Or access to the code?

That would make sense, I do a few jank things with permalinks for backwards compatability. The most likely one is this:

// `_source/en/en.11tydata.js` (My input dir is `_source`)
export default {
	dir: "ltr",
	locale: "en-CA",
	tags: "en",

	// layout: "base.njk",

	// this is super complex and a bit spaghetti // (lol reading this after simplifying the code a lot makes this silly)
	// basically:
	//
	// 1. Remove /en/
	// 2. 11ty will complain when pagination is involved, since
	//	  it tries to output many pages to the same file location.
	//	  because we don't account for that
	//	  (its all just /posts/index/ for example)
	// 3. To make 11ty shut up we check if its paginated, and if
	//	  so add the page number to the URL
	// 4. but now /posts/ doesn't work, and I want it to. So now
	//	  we remove /0/ if it exists.
	//
	// Possible TODO: Move this to another file so we can use this for other things?
	permalink: function({ page, pagination }) {
		// am I EVER going to localize any of this??? Good to have it *i guess* but still.
		let newUrl = `${
			page.filePathStem
				// Make 'en' the default by excluding that segment
				.replace("/en/", "/")
				// If `index` shows anywhere, remove it.
				// Example:
				//   /design/code/index
				//   to
				//   /design/code/
				//
				// I believe this gets both ones with and without trailing
				// slashes properly
				.replace("/index", "")
		}/`;
		// fileSlug? ionstead of filePathStem?

		// Pagination handler moved to posts/index.webc

		// console.log(`[cel] newurl for ${page.filePathStem} is ${newUrl}`)

		return newUrl;
	}
}

I also set a permalink in JS frontmatter in _source/en/posts/index.webc. Its largely simillar, but I believe it has a bit more find-replace. (dang I should really clean up this code)

---javascript
{
	dir: "ltr",
	locale: "en-CA",
	tags: "en",

	testdata: [
		"item 1",
		"item 2",
		"item 3",
	],

	pagination: {
		data: 'testdata', // 'collections.post',
		size: 2,
		reverse: true,
		generatePageOnEmptyData: true
	},

	// this is super complex and a bit spaghetti
	// basically:
	//
	// 1. Remove /en/
	// 2. 11ty will complain when pagination is involved, since
	//	  it tries to output many pages to the same file location.
	//	  because we don't account for that
	//	  (its all just /posts/index/ for example)
	// 3. To make 11ty shut up we check if its paginated, and if
	//	  so add the page number to the URL
	// 4. but now /posts/ doesn't work, and I want it to. So now
	//	  we remove /0/ if it exists.
	//
	// Possible TODO: Move this to another file so we can use this for other things?
	permalink: function({ page, pagination }) {

		//let pageNumberString = if (pagination.pageNumber >= 0)

		//if (pagination.pageNumber == 0) { return false }
		//if (pagination.pageNumber >= 0) { return `/posts/` }

		//return `/posts/${pagination.pageNumber}/`

		let newUrl = `${page.filePathStem.replace("/en/", "/")}/`;
		
		if (pagination)
		{
			newUrl = `${
				page.filePathStem
				.replace("/en/", "/")
				.replace("index", pagination.pageNumber)
				.replace("/0/", "/")
				.replace("/1/", "/")
			}/index.html`
		}

		//console.log(`[cel] newurl for ${page.filePathStem} is ${newUrl}`)

		//console.log(`[cel] Implying default language for ${page.filePathStem}, its new url is ${newUrl}`)
		return newUrl;
	},
  eleventyExcludeFromCollections: true,
}
---

I hope this helps, let me know if you need anything else!

zachleat · 2024-10-16T19:58:20Z

Hmm—I don’t see errors when trying to reproduce using a function permalink (with or without a pagination template)—@rmschindler can you provide yours?

robole · 2024-10-16T20:52:36Z

I get the same error when trying to upgrade from v2 to v3. The root cause appears to be the permalink function in a folder data file , coupled with having JavaScript as a template format (via eleventyConfig.addTemplateFormats()).

I have a bunch of code demos on my website that are like codepens. This is the folder structure.

I shorten the url of these pages using a hash function in demos.11tydata.js. For example, I want what would be https://www.roboleary.net/demos/title-sequences/north-by-northwest/ to be https://www.roboleary.net/demos/SqeWP-RX/. I have a check to prevent JavaScript files being processed in this case.

//  demos.11tydata.js

const path = require("path");
const fs = require("fs-extra");
const utilities = require("../config/utilities");

module.exports = {
  layout: "standalone.njk",
  stylesheet: "styles.css",
  permalink: (data) => {
    let parentFolder = path.normalize(path.dirname(data.page.inputPath));
    let id = utilities.generateId(parentFolder);
    let url = `demos/${id}/`;

    if (data.page.outputFileExtension !== "html") {
      // dont write other files
      url = false;
    }

    return url;
  },
 // yada yada
};

// eleventy.config.js
module.exports = function (config) 
  config.addTemplateFormats("js");

  //yada yada
};

When I get a chance I can see if I can create a minimum viable case for this...

tycobbb · 2024-10-26T18:05:40Z

similar to the above message, i experience this same error on 3.0 when i both:

add support for urls without trailing slashes as documented here.
add support for processing .scss files as documented here.

notes

it seems to be passing the function returned from the addGlobalData("permalink", ...) call into _addDefaultLinkFilename, even though the latter expects a string. specifically, it fails as the engine tries to process the first .scss file.

commenting out either the permalink addGlobalData call or the sass addTemplateFormats call allows the build to complete, though it doesn't compile the scss files.

workaround

i was able to workaround this issue by replacing the permalink entry in the template data for the scss extension:

config.addExtension("scss", {
  outputFileExtension: "css",
  // override the glabal "permalink" data function to output the expeceted css file path instead.
  async getData(inputPath) {
    const permalink = path.parse(inputPath)

    return {
      permalink: path.format({
        ...permalink,
        dir: "",
        base: permalink.base.replace("scss", this.outputFileExtension),
      }),
    }
  },

laurent-d · 2024-10-30T20:16:07Z

Hi, similar issue on my side when i use

module.exports = {
	permalink: function ({ title }) {
		return `/notes/${this.slugify(title)}/`;
	},
};

in a 11tydata.js file (11ty 3.0.0 upgrade)

Hope it helps to find the source of the issue

EatonZ · 2024-11-16T07:08:51Z

Running into this too.

Basically, I have an NJK file with this:
permalink: "{{ post | getPostPermalink }}"

Filter code:

eleventyConfig.addNunjucksFilter("getPostPermalink", function(post)
{
    let permalink = post.link.slice(post.status === "publish" ? 38 : 41);
    return permalink.endsWith("/") ? permalink : permalink + "/";
});

I add a console.log right before the slice to get the value of link. It says:
function link() { [native code] }

On v2.0.1 it correctly outputs the permalink string value - nothing like the above.

Unfortunately I had to downgrade back to v2.0.1 since this is a total blocker. Let me know if I can help narrow it down.

robole · 2024-11-17T00:19:27Z

When I get a chance I can see if I can create a minimum viable case for this...

I was not not able to create a minimal test case for this. When I reduced the size of the codebase to the problematic area, the problem went away. It is a deeper issue.

tobiasbu · 2024-12-01T23:56:13Z

Hello everyone,

I'm also having the same issue in my personal site project. I found out that this issue is happening when I add a JavaScript plugin to bundle JS assets with the esbuild package.

I created this repo with a minimal setup to reproduce the issue. Removing this specific line, the issue goes away.

I hope this helps to investigate the problem with permalink

rmschindler · 2024-12-08T14:28:49Z

Hmm—I don’t see errors when trying to reproduce using a function permalink (with or without a pagination template)—@rmschindler can you provide yours?

my use of permalink is as follows:

// index.11tydata.js

// for matching a string such as "2024/12/25"
const date_regex = /(?<y>\d{4})\/(?<m>\d{2})\/(?<d>\d{2})$/;

function getYear(s) {
  if (s) {
    const match = s.match(date_regex);
    if (match) {
      return match.groups.y;
    }
  }
}

function getMonth(s) {
  if (s) {
    const match = s.match(date_regex);
    if (match) {
      return match.groups.m;
    }
  }
}

function getDay(s) {
  if (s) {
    const match = s.match(date_regex);
    if (match) {
      return match.groups.d;
    }
  }
}

function getId(s) {
  if (s) {
    const match = s.match(date_regex);
    if (match) {
      return match.groups.y + match.groups.m + match.groups.d;
    }
  }
}

module.exports = {
  layout: "entry.html",
  eleventyComputed: {
    year: (data) => getYear(data.page.filePathStem),
    month: (data) => getMonth(data.page.filePathStem),
    day: (data) => getDay(data.page.filePathStem),
    id: (data) => getId(data.page.filePathStem) // TODO: account for more than 1 note a day
  },
  permalink: function (data) {
    const stem = data.page.filePathStem;
    const y = getYear(stem);
    const m = getMonth(stem);
    const d = getDay(stem);
    return `/v1/${y}/${m}/${d}/`;
  }
}

rmschindler · 2024-12-08T14:33:42Z

Hello everyone,

I'm also having the same issue in my personal site project. I found out that this issue is happening when I add a JavaScript plugin to bundle JS assets with the esbuild package.

I created this repo with a minimal setup to reproduce the issue. Removing this specific line, the issue goes away.

I hope this helps to investigate the problem with permalink

I also have an addPlugin:

eleventyConfig.addPlugin(eleventyAsciidoc);

and for me also, when I remove this line, the error goes away

zachleat · 2024-12-09T23:00:32Z

I see the issue now—thank you for the test case!

There was a bug with how we were handling a function permalink value from the data cascade on a Custom template engine in the default change from #2780.

Fix will be shipping with 3.0.1-alpha.1—thank you!

rmschindler added the needs-triage label Oct 4, 2024

zachleat added the error-messaging label Oct 16, 2024

zachleat added needs-test-case Please submit a reproducible test case showcasing the issue! and removed needs-triage labels Oct 16, 2024

zachleat added the on-hold label Oct 21, 2024

zachleat removed the on-hold label Dec 9, 2024

zachleat self-assigned this Dec 9, 2024

zachleat added bug and removed needs-test-case Please submit a reproducible test case showcasing the issue! labels Dec 9, 2024

zachleat added this to the Eleventy 3.0.1 milestone Dec 9, 2024

zachleat closed this as completed in 117e7e6 Dec 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

11ty errors with "link.slice is not a function" #3472

11ty errors with "link.slice is not a function" #3472

rmschindler commented Oct 4, 2024

rmschindler commented Oct 4, 2024

tryoxiss commented Oct 8, 2024

rmschindler commented Oct 8, 2024

zachleat commented Oct 16, 2024

tryoxiss commented Oct 16, 2024 •

edited

Loading

zachleat commented Oct 16, 2024

robole commented Oct 16, 2024 •

edited

Loading

tycobbb commented Oct 26, 2024 •

edited

Loading

laurent-d commented Oct 30, 2024 •

edited

Loading

EatonZ commented Nov 16, 2024

robole commented Nov 17, 2024 •

edited

Loading

tobiasbu commented Dec 1, 2024 •

edited

Loading

rmschindler commented Dec 8, 2024

rmschindler commented Dec 8, 2024

zachleat commented Dec 9, 2024

11ty errors with "link.slice is not a function" #3472

11ty errors with "link.slice is not a function" #3472

Comments

rmschindler commented Oct 4, 2024

Operating system

Eleventy

Describe the bug

Reproduction steps

Expected behavior

Reproduction URL

Screenshots

rmschindler commented Oct 4, 2024

tryoxiss commented Oct 8, 2024

rmschindler commented Oct 8, 2024

zachleat commented Oct 16, 2024

tryoxiss commented Oct 16, 2024 • edited Loading

zachleat commented Oct 16, 2024

robole commented Oct 16, 2024 • edited Loading

tycobbb commented Oct 26, 2024 • edited Loading

notes

workaround

laurent-d commented Oct 30, 2024 • edited Loading

EatonZ commented Nov 16, 2024

robole commented Nov 17, 2024 • edited Loading

tobiasbu commented Dec 1, 2024 • edited Loading

rmschindler commented Dec 8, 2024

rmschindler commented Dec 8, 2024

zachleat commented Dec 9, 2024

tryoxiss commented Oct 16, 2024 •

edited

Loading

robole commented Oct 16, 2024 •

edited

Loading

tycobbb commented Oct 26, 2024 •

edited

Loading

laurent-d commented Oct 30, 2024 •

edited

Loading

robole commented Nov 17, 2024 •

edited

Loading

tobiasbu commented Dec 1, 2024 •

edited

Loading