How do I consume eleventy-fetch data in my Lit components?

[bossanovaorca]

I am building a site with Lit web components and 11ty, and I would like make a request with eleventy-fetch to feed data into my component. I've tried a few approaches to this, but I am unable to import the cached data in my component. The errors all seem to revolve around lack of default imports/exports in eleventy-fetch. Can anyone help me with this issue?

11ty JS data file:

// data.js
const EleventyFetch = require('@11ty/eleventy-fetch');

module.exports = async function () {
  let json = await EleventyFetch(apiEndpointUrl, { type: 'json' });
  return json;
};

// also it seems
// `import EleventyFetch from '@11ty/eleventy-fetch';`
// and
// `export default async function() { ...
// are not valid?

web component file:

// I am unable to access the fetched data in my web component file
import data from '../_data/data.js'; // Error: 'default' is not exported by src/_data/data.js

// trying to perform the fetch within this file does not seem to work either
import EleventyFetch from '@11ty/eleventy-fetch'; // Error: 'EleventyFetch' is not exported by node_modules/@11ty/eleventy-fetch/eleventy-fetch.js

---

using an inline script seems like a workaround in this situation since my JSON data gets fed through an HTML parser before I can interact with it in the template. Is there some way to directly import 11ty data files in my component JS/TS?

[bossanovaorca]

with the help of bennyp in Discord:

using an inline script and running the data through a dump Nunjucks filter allowed me to pass the data into my web component. this does seem like a workaround though, especially since my API response is completely public this way...