Eleventy Edge - Nothing being displayed between tags on Netlify but works when running netlify dev locally

Support
1

Hi,

I’m using the generated eleventy-edge function with an extra cookie added and the filter changed:

import { EleventyEdge } from "eleventy:edge";
import precompiledAppData from "./_generated/eleventy-edge-app-data.js";

export default async (request, context) => {
  try {
    console.log("Eleventy Edge function running");
    let edge = new EleventyEdge("edge", {
      request,
      context,
      precompiled: precompiledAppData,

      // default is [], add more keys to opt-in e.g. ["appearance", "username"]
      cookies: ["bv-cookie-policy"],
    });

    edge.config((eleventyConfig) => {
      // Add some custom Edge-specific configuration
      // e.g. Fancier json output
      eleventyConfig.addFilter("json", (string) => JSON.parse(string));
    });

    return await edge.handleResponse();
  } catch (e) {
    console.log("ERROR", { e });
    return context.next(e);
  }
};

This is being used to decide whether a cookie banner is shown or not:

{% edge %}
{% set cookiePolicy = eleventy.edge.cookies['bv-cookie-policy'] %}

{% if not cookiePolicy %}
	<div id="cookie-banner">
		<div class="container">
			<h2>Let us know you agree to cookies</h2>
			<p>We use some essential cookies to make this website work. We'd like to set additional cookies to give you the best online experience.</p>

			<div><button type="button" data-button="accept-cookies">Accept all cookies</button></div>
			<div><a href="/manage-cookies" class="btn">Manage cookies</a></div>
		</div>
	</div>
{% endif %}
{% endedge %}

and this is my netlify.toml (there is another Netlify function in there that handles site search, this is working fine)

[build]
  command = "npm run prod"
  publish = "dist"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "same-origin"
    Permissions-Policy = "microphone=(self), camera=(self)"
    Content-Security-Policy = "upgrade-insecure-requests;"

[[edge_functions]]
  function = "site-search"
  path = "/search"

[[edge_functions]]
  function = "site-search"
  path = "/search/"

[[edge_functions]]
  function = "eleventy-edge"
  path = "/*"

If I run netlify dev locally and the cookie I’m looking for doesn’t exist then the cookie banner content will show. However when I deploy this to an actual Netlify server nothing shows at all. The function is running as I can see the console log in the Netlify edge function log.

Package versions:
“@11ty/eleventy”: “^v2.0.0-canary.7”
“@netlify/functions”: “^1.0.0”

Am I doing anything wrong here?

Cheers
Mark

2

Cross-referencing the discussion on the 11ty Discussions stuff too: Eleventy Edge - Nothing being displayed between tags on Netlify but works when running netlify dev locally · Discussion #2409 · 11ty/eleventy · GitHub (just to keep everyone on the same page)

1 Like