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

[mark-reason]

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

[zachleat]

So it works locally but not on Netlify servers, hmm. Which type of Netlify account are you using? https://www.netlify.com/pricing/

Can you share the code that writes the bv-cookie-policy cookie? And/or the full value of the cookie from your devtools on both localhost and Netlify server?

Also probably unrelated but just to eliminate variables here can you update to the latest canary? I think we’re up to 11 as of posting this.

(note for me, this was also posted to the netlify support forums https://answers.netlify.com/t/eleventy-edge-nothing-being-displayed-between-tags-on-netlify-but-works-when-running-netlify-dev-locally/60315)

[zachleat]

yeah feel free to invite my user to the repo @zachleat

[mark-reason]

I have sent you an invite

[mark-reason]

Okay @zachleat, I think I found the culprit...

In my .eleventy.js

// Only minify HTML if we are in production because it slows builds _right_ down
  if (process.env.ELEVENTY_ENV === "production") {
    config.addTransform(
      "htmlmin",
      require("./utils/transforms/html-min-transform.js")
    );
  }

I'm presuming the minification is stripping out the comments that are used as placeholders for the Eleventy Edge function.

[zachleat]

Yeah, you’re absolutely right. Some additional discussion here #2433

Can you add your HTML minifier to #2433? Thank you!

[mark-reason]

I was using html-minifier also so I won't add anything :)