Bad reverse filter output because Liquid is outdated

[barcia]

Describe the bug
When I use the Liquid reverse filter (Not the reverse() function) to revet a collection it works bad if I use more than one time in the website for the same collection.

To Reproduce
This is my working example:

<!-- notes.html -->
<ul>
    {%- assign notes = collections.notes | reverse -%}
    {%- for entry in notes -%}
        <li>{{ entry.data.title }}</li>
    {%- endfor -%}
</ul>

Outputs:

• Note D
• Note C
• Note B
• Note A

But if I use the same code also in other page:

<!-- home.html -->
<ul>
    {%- assign notes = collections.notes | reverse -%}
    {%- for entry in notes -%}
        <li>{{ entry.data.title }}</li>
    {%- endfor -%}
</ul>

Outputs:

• Note A
• Note B
• Note C
• Note D

Environment:

• OS and Version: Mac
• Eleventy Version: 0.10.0

Additional context
In the issue #532 an user comment the same problem, but he said that is a problema that Liquid solved in the v8.3.2.

I think that the problem is that 11ty still use the v6.4.3.

[samuelpath]

Same issue as #1334 ?

[Savjee]

Bumped into the same issue. Liquid reverses the collection in place!

"Fixed" it by creating my own filter.

config.addLiquidFilter("reverse", (collection) => {
    const arr = [...collection];
    return arr.reverse();
});

[zachleat]

Duplicate of #469

The major upgrade will ship with 1.0

[xplosionmind]

Hi, I am using Eleventy 1.0.0 and I am getting this error at build time:

Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble rendering html template ./pages/filinge.html

`TemplateContentRenderError` was thrown
> Cannot read properties of undefined (reading 'reverse'), file:./pages/filinge.html, line:9

`RenderError` was thrown
> Cannot read properties of undefined (reading 'reverse')

`TypeError` was thrown:
    TypeError: Cannot read properties of undefined (reading 'reverse')
        at reverse (/Users/tommi/tommi.space/node_modules/liquidjs/dist/liquid.common.js:3289:14)
        at Object.render (/Users/tommi/tommi.space/node_modules/liquidjs/dist/liquid.common.js:1914:26)
        at /Users/tommi/tommi.space/node_modules/liquidjs/dist/liquid.common.js:1807:21
        at Array.reduce (<anonymous>)
        at Object.evalValue$$1 [as evalValue] (/Users/tommi/tommi.space/node_modules/liquidjs/dist/liquid.common.js:1806:29)
        at Object.evalValue$$1 [as evalValue] (/Users/tommi/tommi.space/node_modules/liquidjs/dist/liquid.common.js:3577:26)
        at Object.render (/Users/tommi/tommi.space/node_modules/liquidjs/dist/liquid.common.js:2253:30)
        at Object._callee$ (/Users/tommi/tommi.space/node_modules/liquidjs/dist/liquid.common.js:1851:55)
        at tryCatch (/Users/tommi/tommi.space/node_modules/liquidjs/dist/liquid.common.js:108:40)
        at Generator.invoke [as _invoke] (/Users/tommi/tommi.space/node_modules/liquidjs/dist/liquid.common.js:319:22)
Wrote 0 files in 0.56 seconds (v0.12.1)

The file in the error contains this:

{% assign filinge = site.filinge | reverse %}
{% for post in filinge %}
  <a href='{{ post.url }}'>{{ post.title }}</a>
{% endfor %}

I tried using @Savjee’s solution by adding his script to my .eleventy.js, but nothing changes. Am I doing something wrong? Shouldn’t the problem be fixed without even creating the custom filter?

[pdehaan]

@xplosionmind Yeah, I'd imagine overriding the reverse filter locally using the above solution would override the built-in LiquidJS reverse filter.

The error almost sounds like your site.filinge variable is undefined:

Cannot read properties of undefined (reading 'reverse')

Is your repo public? If so I can take a look.
If not, I'd probably start by trying to dump out the contents of site.filinge and verify what the contents are.

// .eleventy.js snippet
eleventyConfig.addFilter("inspect", require("util").inspect);

Then:

<pre>{{ site.filinge | inspect }}</pre>

---

UPDATE: FWIW, this worked for me in Eleventy v1.0.0:

// src/_data/site.js
module.exports = {
  filinge: [
    { title: "OnE", url: "/one" },
    { title: "TwO", url: "/two" },
    { title: "ThReE", url: "/three" },
  ],
};

---
# src/pages/filinge.html
title: Filinge
---

<h1>{{ title }}</h1>

<!-- Where `site.filinge` is the `filinge` property in my src/_data/site.js file. -->
{% assign filinge = site.filinge | reverse %}
<!-- reverse sorted -->
{% for post in filinge %}
  <a href='{{ post.url }}'>{{ post.title }}</a>
{% endfor %}
<!-- raw data -->
<pre>{{ site.filinge | inspect }}</pre>

OUTPUT

<h1>Filinge</h1>

  <a href='/three'>ThReE</a>
  <a href='/two'>TwO</a>
  <a href='/one'>OnE</a>

<pre>[
  { title: 'OnE', url: '/one' },
  { title: 'TwO', url: '/two' },
  { title: 'ThReE', url: '/three' }
]</pre>