getBundle in serverless only running on first invocation

[timonforrer]

Operating system

macOS Sonoma 14.2.1 (23C71)

Eleventy

2.0.2-alpha.2

Describe the bug

I'm using Eleventy Serverless in dynamic template rendering mode to render previews of the site before they get published in the CMS.

The preview works fine so far. However, only on the first render. As soon as I reload the page or want to preview another document, the CSS and JS that gets generated using getBundle('css') and getBundle('js') are empty.

I'm generating the styles and scripts as follows:

<style @raw="getBundle('css')" webc:keep></style>

...

<script @raw="getBundle('js')" webc:keep></script>

Reproduction steps

1. Goto https://11ty-get-bundle-test.netlify.app/preview/modular/?id=page-one
2. Reload the page

Expected behavior

getBundle should run on every invocation of serverless function.

Reproduction URL

https://github.com/timonforrer/11ty-get-bundle-test

Screenshots

No response

[timonforrer]

FYI: this is no longer urgent for me, but might still be something that's worth fixing. I just externalized the scripts and styles from my .webc components into separate .js and .css files so I do not have to rely on getBundle.

[derron1]

I'm also facing the same issue. Could you expand on how you externalized the scripts and styles?
thanks

[timonforrer]

I just copied all the CSS and JS from my WebC components into a styles.css and scripts.js file and deleted the style and script tags in my WebC components.

To copy the CSS and JS files to my output folder I use Passtrough File Copy.

Finally, I link the files as regular stylesheets/scripts like this:

<link rel="stylesheet" href="/styles.css" webc:keep>
...
<script src="/scripts.js" webc:keep></script>

The webc:keep attribute is needed, otherwise the link and script tag will get removed in the final html file.

Does that help you @derron1

[d3v1an7]

Confirming I bumped into this one as well! The easiest fix for me was just to revert to using the bundle file instead of having it all inline.

For example, using the example repo above:

Change

<style @raw="getBundle('css')" webc:keep></style>

To

<link webc:keep rel="stylesheet" :href="getBundleFileUrl('css')" />

Edit: Didn't refresh enough! Using a getBundleFileUrl has the same issue. I had a bit of a dig, and it looks like this.pages is empty on refresh, so writeBundle returns an empty string.

eleventy-plugin-bundle/codeManager.js

Lines 157 to 160 in 10f19ef

	if(!this.pages[url]) {
	debug("No bundle code found for %o on %o, %O", this.name, url, this.pages);
	return "";
	}

I don't know how this.pages gets populated, so I'm a bit stuck from here.