Liquid template can't find include file with relative path #3502

dave-kennedy · 2024-10-24T05:37:19Z

Operating system

Ubuntu 22.04

Eleventy

3.0.0

Describe the bug

(For context, I was trying to implement the new bundle stuff in v3.0, following the pattern established by eleventy-base-blog, but ran into problems when I tried to include the css file in my layout. The only difference is I'm using Liquid templates.)

My project looks like this:

$ tree -a
./
├── content/
│   └── index.md
├── _includes/
│   └── base.liquid
├── public/
│   └── style.css
├── eleventy.config.js
└── package.json

I want to include public/style.css in _includes/base.liquid:

<html>
    <head>
        <title>Test</title>
        <style>{% include 'public/style.css' %}</style>
    </head>
    <body>
        {{ content }}
    </body>
</html>

But it throws this error:

$ npx @11ty/eleventy
[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble writing to "./_site/index.html" from "./content/index.md" (via EleventyTemplateError)
[11ty] 2. ENOENT: Failed to lookup "public/style.css" in "./_includes/,./content/", file:./_includes/base.liquid, line:4, col:16 (via RenderError)
[11ty] 3. ENOENT: Failed to lookup "public/style.css" in "./_includes/,./content/"
[11ty] 
[11ty] Original error stack trace: Error: ENOENT: Failed to lookup "public/style.css" in "./_includes/,./content/"
[11ty]     at Loader.lookupError (/home/dave/.npm/_npx/34c007b21a377b7f/node_modules/liquidjs/dist/liquid.node.js:2439:21)
[11ty]     at Loader.lookup (/home/dave/.npm/_npx/34c007b21a377b7f/node_modules/liquidjs/dist/liquid.node.js:2407:20)
[11ty]     at lookup.next (<anonymous>)
[11ty]     at toPromise (/home/dave/.npm/_npx/34c007b21a377b7f/node_modules/liquidjs/dist/liquid.node.js:524:32)
[11ty]     at async toPromise (/home/dave/.npm/_npx/34c007b21a377b7f/node_modules/liquidjs/dist/liquid.node.js:532:25)
[11ty]     at async toPromise (/home/dave/.npm/_npx/34c007b21a377b7f/node_modules/liquidjs/dist/liquid.node.js:532:25)
[11ty]     at async toPromise (/home/dave/.npm/_npx/34c007b21a377b7f/node_modules/liquidjs/dist/liquid.node.js:532:25)
[11ty]     at async TemplateLayout.renderPageEntry (file:///home/dave/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/TemplateLayout.js:225:22)
[11ty]     at async #renderPageEntryWithLayoutsAndTransforms (file:///home/dave/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/Template.js:856:14)
[11ty]     at async Template.generateMapEntry (file:///home/dave/.npm/_npx/34c007b21a377b7f/node_modules/@11ty/eleventy/src/Template.js:896:15)
[11ty] Wrote 0 files in 0.10 seconds (v3.0.0)

Here's my config:

export const config = {
  dir: {
    input: 'content',
    includes: '../_includes'
  }
};

I tried changing the include path to ../public/style.css but no dice there. If I use a Nunjucks layout instead then everything works great, but I'd rather stick with Liquid.

Reproduction steps

Go to '...'
Click on '....'
Scroll down to '....'
See an error

Expected behavior

I should be able to include a file outside the layouts directory in a Liquid template.

Reproduction URL

https://github.com/dave-kennedy/eleventy-test

Screenshots

No response

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

dave-kennedy · 2024-10-24T17:26:37Z

I came up with a workaround. First, change the config:

export default function (eleventyConfig) {
  eleventyConfig.setLiquidOptions({
    root: ['./content', './_includes', './public']
  });
};

export const config = {
  dir: {
    input: 'content',
    includes: '../_includes'
  }
};

Then change the include to {% render 'style.css' %}.

./public has to be explicitly added to the list because according to the docs:

relativeReference?: boolean

Allow refer to layouts/partials by relative pathname. To avoid arbitrary filesystem read, paths been referenced also need to be within corresponding root, partials, layouts. Defaults to true.

Defined in src/liquid-options.ts:22

I'm not sure if we still need to define config.dir.includes. And I'm still not sure why it works in Nunjucks without any other changes.

It occurs to me that the included CSS file doesn't need to be in the public directory anyways because it's included in the template. So it would make more sense for it to be in the _includes directory.

zachleat · 2024-10-24T18:09:11Z

I think @harttle might need to weigh in here. The following test case fails via node standalone.js in your repo, which is surprising to me:

import { Liquid } from "liquidjs";
let lib = new Liquid({
	root: ["./_includes", "./content"]
});

let tmpl = await lib.parse(`{% include '../public/style.css' %}`, './_includes/base.liquid');

let html = await lib.render(tmpl);
console.log( html );

node:internal/modules/run_main:122
    triggerUncaughtException(
    ^

ENOENT: Failed to lookup "../public/style.css" in "./_includes,./content", file:./_includes/base.liquid, line:1, col:1
>> 1| {% include '../public/style.css' %}
      ^
RenderError: ENOENT: Failed to lookup "../public/style.css" in "./_includes,./content", file:./_includes/base.liquid, line:1, col:1
    at Render.renderTemplates (/Users/zachleat/Temp/eleventy-3502/node_modules/liquidjs/dist/liquid.node.js:1210:53)
    at renderTemplates.throw (<anonymous>)
    at toPromise (/Users/zachleat/Temp/eleventy-3502/node_modules/liquidjs/dist/liquid.node.js:524:32)
    at async file:///Users/zachleat/Temp/eleventy-3502/standalone.js:8:12
From Error: ENOENT: Failed to lookup "../public/style.css" in "./_includes,./content"
    at Loader.lookupError (/Users/zachleat/Temp/eleventy-3502/node_modules/liquidjs/dist/liquid.node.js:2439:21)
    at Loader.lookup (/Users/zachleat/Temp/eleventy-3502/node_modules/liquidjs/dist/liquid.node.js:2407:20)
    at lookup.next (<anonymous>)
    at toPromise (/Users/zachleat/Temp/eleventy-3502/node_modules/liquidjs/dist/liquid.node.js:524:32)
    at toPromise (/Users/zachleat/Temp/eleventy-3502/node_modules/liquidjs/dist/liquid.node.js:530:25)
    at toPromise (/Users/zachleat/Temp/eleventy-3502/node_modules/liquidjs/dist/liquid.node.js:530:25)
    at async toPromise (/Users/zachleat/Temp/eleventy-3502/node_modules/liquidjs/dist/liquid.node.js:532:25)
    at async file:///Users/zachleat/Temp/eleventy-3502/standalone.js:8:12

as a workaround this works (but, why?):

let lib = new Liquid({
	root: ["./_includes", "./content", "."]
});

What does "." mean in this context? It refers to the current root directory, no? I suspect there might be some requirement that includes must be inside of root, maybe?

Ryuno-Ki · 2024-10-25T07:23:06Z

At least, "." is the default value.

After reading through the code, I would guess, it is because Liquid's loader is responsible for determining which directories to consider.

harttle · 2024-10-25T14:03:22Z

What does "." mean in this context?

"." means CWD.

The following test case fails via node standalone.js in your repo, which is surprising to me:

@zachleat Thanks for looping me in. @dave-kennedy has provided a good explanation. Accessing outside of root/partials/layouts is not allowed. A quick fix without changing the template files is to update this line (allows everything in . to be accessed):

	root: ["./_includes", "./content", "."]

zachleat · 2024-10-25T15:08:38Z

Thank you @harttle!

dave-kennedy · 2024-10-25T15:32:38Z

@zachleat I think it would be good if the base blog used an approach that would work with another template engine. Probably exclude the css from the public folder too.

dave-kennedy added the needs-triage label Oct 24, 2024

zachleat added bug template language: liquid and removed needs-triage labels Oct 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Liquid template can't find include file with relative path #3502

Liquid template can't find include file with relative path #3502

dave-kennedy commented Oct 24, 2024

dave-kennedy commented Oct 24, 2024 •

edited

Loading

zachleat commented Oct 24, 2024 •

edited

Loading

Ryuno-Ki commented Oct 25, 2024

harttle commented Oct 25, 2024

zachleat commented Oct 25, 2024

dave-kennedy commented Oct 25, 2024

Liquid template can't find include file with relative path #3502

Liquid template can't find include file with relative path #3502

Comments

dave-kennedy commented Oct 24, 2024

Operating system

Eleventy

Describe the bug

Reproduction steps

Expected behavior

Reproduction URL

Screenshots

dave-kennedy commented Oct 24, 2024 • edited Loading

zachleat commented Oct 24, 2024 • edited Loading

Ryuno-Ki commented Oct 25, 2024

harttle commented Oct 25, 2024

zachleat commented Oct 25, 2024

dave-kennedy commented Oct 25, 2024

dave-kennedy commented Oct 24, 2024 •

edited

Loading

zachleat commented Oct 24, 2024 •

edited

Loading