getBundleFileUrl Crashes When Bundling CSS from NJK Macro #17
Comments
|
I have a similar issue when trying to print syntax-highlighted html snippets using markdown fenced code blocks in a webc,md file. Example markdown source
Let's define a component which performs the following tasks:
1. queries for messages
2. subscribes to any new messages
3. when new messages arrive, integrate them with the cached messages from the query.
We'll accomplish this by calling `subscribeToMore` on our element once it's
connected to the DOM, passing in an `updateQuery` function to define the merge
for new data:
<code-tabs collection="libraries" default-tab="lit">
<code-tab @tab="$data.codeTabs.html">
```html
<apollo-client id="messages-client">
<apollo-query id="messages-query">
<script webc:keep type="application/graphql" src="Messages.query.graphql"></script>
<template webc:raw>
<link webc:keep rel="stylesheet" href="messages.css">
<ol>
<template type="repeat" repeat="{{ data.messages ?? [] }}">
<li>
<h4>
<time datetime="{{ date }}">{{ formatDate(item.date) }}</time>
<span class="user">{{ item.user }} said:</span>
</h4>
<p>{{ item.message }}</p>
</li>
</template>
</ol>
</template>
</apollo-query>
</apollo-client>
```
</code-tab>
</code-tabs>error: in which case the state of the shortcode function in eleventy.shortcodes.cjs:24 is { name: 'css', content: [], bucket: 'default', urlOverride: '' }proposed fix: // e.g. `css` shortcode to add code to page bundle
// These shortcode names are not configurable on purpose (for wider plugin compatibility)
eleventyConfig.addPairedShortcode(name, function addContent(content, bucket, urlOverride) {
let url = urlOverride || this.page?.url;
if (url) {
managers[name].addToPage(url, content, bucket);
}
return "";
});I used this patch with diff --git a/node_modules/@11ty/eleventy-plugin-bundle/eleventy.shortcodes.js b/node_modules/@11ty/eleventy-plugin-bundle/eleventy.shortcodes.js
index 6bb73b8..56260c7 100644
--- a/node_modules/@11ty/eleventy-plugin-bundle/eleventy.shortcodes.js
+++ b/node_modules/@11ty/eleventy-plugin-bundle/eleventy.shortcodes.js
@@ -21,8 +21,10 @@ module.exports = function(eleventyConfig, options = {}) {
// e.g. `css` shortcode to add code to page bundle
// These shortcode names are not configurable on purpose (for wider plugin compatibility)
eleventyConfig.addPairedShortcode(name, function addContent(content, bucket, urlOverride) {
- let url = urlOverride || this.page.url;
- managers[name].addToPage(url, content, bucket);
+ let url = urlOverride || this.page?.url;
+ if (url) {
+ managers[name].addToPage(url, content, bucket);
+ }
return "";
});
}); |
|
@bennypowers, your patch does indeed suppress the error, but the CSS is still not being rendered from nunjucks macro files. I suspect that the macro's |
|
Just wanted to report I also ran into this issue, using |
|
the same issue |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It appears that trying to bundle css from a nunjucks macro file using getBundleFileUrl results in a fatal error.
Here is the stacktrace (
<project folder>substituted for actual pc path):Here is my project structure:
package.json:
.eleventy.js:
index.nkj:
_includes/foo.nkj:
When I comment out the
{% css %}block in foo.njk, then the project renders with no errors (albeit without any css).I am still very green in 11ty, so hopefully I am just missing something obvious.
Thank you for your time and assistance.
The text was updated successfully, but these errors were encountered: