Giter Site home page Giter Site logo

Comments (5)

Kein1945 avatar Kein1945 commented on June 2, 2024 1

I think it would be greate to have a warning at least if we have paggination and missing permalink properties.

from eleventy.

Kein1945 avatar Kein1945 commented on June 2, 2024

I've spend two hours to understand why it's happening. Solutions is easy.
11ty generating N pages for each pagination page, and trying to create files with same name.
Solution to add permalink, which is depends on pagination page number:

permalink: /my-awesome-listing/{% if pagination.pageNumber > 0 %}/page-{{ pagination.pageNumber }}{% endif %}

from eleventy.

eaton avatar eaton commented on June 2, 2024

I think there might be some misunderstanding — the issue isn't that a paginated page without a permalink is generating permalink collisions. It's that the eleventyComputed permalink is working correctly until the permalink generation function access one of the collections in data.collection; once a collection is touched via the data proxy object, the permalink function's return value appears to be ignored.

export default async function(eleventyConfig) {
  // ...
  eleventyConfig.addGlobalData('eleventyComputed.permalink', computedPermalink);
}

const computedPermalink = function() {
  return( data ) => {
      // Accessing data.collections.[whatever] in any way -- with a conditional check,
      // iterating its contents, etc -- prevents the next line from returning the permalink value.
      console.log(data.collections.all);

      // This return value is ignored unless the console.log call is commented out
      return `/${data.document.id}/`;
  }
}

The discarding of the returned permalink is what results in the collisions — just adding a hard-coded permalink line to the frontmatter works because it doesn't touch any collections.

from eleventy.

eaton avatar eaton commented on June 2, 2024

After some additional digging, I think I'm a bit closer to figuring out what's going on:

  1. TemplateMap.cache() gets called whenever any collections data is retrieved. (This includes collections.all, etc)
  2. TemplateMap.checkForDuplicatePermalinks() is called inside of TemplateMap.cache(); by that point all of the paginated outputs for a single template have already been expanded. If duplicates are found, an error is thrown.
  3. If an eleventyComputed.permalink function accesses any collections, the permalinks are checked for collisions before the actual permalink can be returned; eleventy uses a fallback permalink based on the filepath, which causes collisions for paginated templates.

I'm not sure if this is something that can be resolved (I think i remember some poking near this in the serverless code?), or if I'm just pushing computed permalinks too far for my own good. Will continue poking at it, but at least I understand what order of operations triggers the issue.

from eleventy.

olets avatar olets commented on June 2, 2024

I ran into this too.

I think our problem is actually "accessing data.collections in eleventyComputed.permalink makes the permalink empty", and that the collision error you're getting is a secondary effect of multiple items getting the same buggy permalink (and that the secondary error prevents the primary from being logged).

Stackblitz reproduction https://stackblitz.com/edit/stackblitz-starters-ukmhij (where you used addGlobalData I used files; the repro uses v3 alpha but I confirmed that the same thing happens in the latest v2)

The bug trigger:

export default {
  eleventyComputed: {
    permalink: (data) => {
      console.log(data?.collections?.length);

      return;
    },
  },
}

With the computed permalink applied to only one input file, the error is (with a real path instead of <input file path>)

   [11ty] 1. Having trouble writing to "" from "<input file path>" (via EleventyTemplateError)

The debug mode has more details (with a real path instead of <input file path>)

  Eleventy:Template First round of computed data for '<input file path>' +8ms
  Eleventy:Template Rendering permalink for '<input file path>': (((11ty(((permalink)))11ty))) becomes '(((11ty(((permalink)))11ty)))' +3ms
  Eleventy:ComputedData 'page.url' accesses [ 'permalink' ] variables +0ms
  Eleventy:Template Rendering permalink for '<input file path>': (((11ty(((permalink)))11ty))) becomes '(((11ty(((permalink)))11ty)))' +1ms
  Eleventy:ComputedData 'page.outputPath' accesses [ 'permalink' ] variables +0ms
  Eleventy:ComputedData 'eleventyExcludeFromCollections' accesses [] variables +5ms
  Eleventy:ComputedData 'permalink' accesses [ 'collections', 'collections.length' ] variables +0ms
  Eleventy:ComputedData Computed data order of execution: [ 'eleventyExcludeFromCollections' ] +1ms
  Eleventy:TemplateMap Collection: collections.all size: 1 +13ms
  Eleventy:TemplateMap Collection: collections.posts size: 1 +0ms
  Eleventy:TemplateMap Collection: collections.all size: 1 +0ms
  Eleventy:Template Second round of computed data for '<input file path>' +6ms
  Eleventy:ComputedData Computed data order of execution: [ 'collections.length', 'permalink', 'page.url', 'page.outputPath' ] +0ms
  Eleventy:TemplateWriter Template map created. +124ms
  Eleventy:Logger Writing  from <input file path> (liquid) +0ms
[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble writing to "" from "<input file path>" (via EleventyTemplateError)
  Eleventy:EleventyErrorHandler (error stack): EleventyTemplateError: Having trouble writing to "" from "<input file path>"
  Eleventy:EleventyErrorHandler     at eval (/home/projects/stackblitz-starters-ukmhij/node_modules/@11ty/eleventy/src/TemplateWriter.js:390:8)
  Eleventy:EleventyErrorHandler     at async Eleventy.executeBuild (/home/projects/stackblitz-starters-ukmhij/node_modules/@11ty/eleventy/src/Eleventy.js:1259:10) +0ms

The source lines linked in that error are

  1. https://github.com/11ty/eleventy/blob/main/src/TemplateWriter.js#L374
  2. https://github.com/11ty/eleventy/blob/main/src/Eleventy.js#L1259

from eleventy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.