fetch() not implemented (via Error) eleventy

[bsastregx]

Hi!

Looooooving Eleventy!

We are running with the following issue:
[11ty] fetch() not implemented (via Error)

There is some code we are using in a stenciljs component, that uses fetch:

if (!request) {
    // we don't already have a request
    request = fetch(url).then(response => {
      if (response.ok) {
        return response.text().then(svgContent => {
          iconContent.set(url, svgContent);
          return svgContent;
        });
      }
      iconContent.set(url, '');
    });
...

However, I dont understand why is giving the error, since this fetch code should only be executed on runtime, that is, when the web components loads on the browser...

Any ideas?

Thanks in advance.

[pdehaan]

Might depend on which version of Nodejs you're using.
Per https://nodejs.org/dist/latest-v18.x/docs/api/globals.html#fetch history, it looks like fetch() was added in [email protected] but publicly available (but still "experimental") in v18.

But if you're using Node 18+ and still seeing the error, I might be way off and it'd something else entirely. 🤷

[bsastregx]

Thanks for the quick reply @pdehaan 👍

• Yes, I am using passthrough copy to copy the web components, wich are .js files. These web components need to be in the output directory for the web page to work.
• I have just created a public version of the repo for you: https://github.com/bsastregx/gwds-eleventy-public

1. clone
2. npm install
3. npm start

You should see the fetch errors I just mentioned on the console.
Thanks in advance.

[bsastregx]

BTW, I am using node v16.16.0

[pdehaan]

Quick clone+install+run gives me about 119 errors. A bunch looked similar to this, but didn't try piping the output to a log file to check/grep all of the stack traces:

[11ty] Unhandled rejection in promise: (more in DEBUG output)
[11ty] Failed to parse URL from /assets/icons/globe.svg (via TypeError)
[11ty]
[11ty] Original error stack trace: TypeError: Failed to parse URL from /assets/icons/globe.svg
[11ty]     at Object.fetch (node:internal/deps/undici/undici:11457:11)
[11ty]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[11ty]     at async GwdsIcon.getIcon (/private/tmp/gwds-eleventy-public/src/hydrate/index.js:9810:29)
unhandledRejection TypeError: Failed to parse URL from /assets/icons/globe.svg
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async GwdsIcon.getIcon (/private/tmp/gwds-eleventy-public/src/hydrate/index.js:9810:29) {
  [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
      at new NodeError (node:internal/errors:399:5)
      at new URL (node:internal/url:560:13)
      at new Request (node:internal/deps/undici/undici:7041:25)
      at fetch2 (node:internal/deps/undici/undici:10598:25)
      at Object.fetch (node:internal/deps/undici/undici:11455:18)
      at fetch (node:internal/process/pre_execution:230:25)
      at fetch (/private/tmp/gwds-eleventy-public/src/hydrate/index.js:3879:14)
      at getSvgContent (/private/tmp/gwds-eleventy-public/src/hydrate/index.js:9727:15)
      at GwdsIcon.getIcon (/private/tmp/gwds-eleventy-public/src/hydrate/index.js:9810:35)
      at /private/tmp/gwds-eleventy-public/src/hydrate/index.js:9771:12 {
    input: '/assets/icons/globe.svg',
    code: 'ERR_INVALID_URL'
  }
}

If I comment out the hydrate stuff, it seems to build successfully (macOS 13.2.1, Node v18.16.0 (w/ bundled npm 9.5.1):

npm run build

> [email protected] build
> npx @11ty/eleventy

[11ty] Writing _site/index.html from ./src/index.html (njk)
[11ty] Writing _site/en/developers/index.html from ./src/en/developers.html (njk)
[11ty] Writing _site/en/index-old/index.html from ./src/en/index-old.html (njk)
[11ty] Writing _site/en/distributors/index.html from ./src/en/distributors.html (njk)
[11ty] Writing _site/en/page/index.html from ./src/en/page.html (njk)
[11ty] Writing _site/en/index.html from ./src/en/index.html (njk)
[11ty] Writing _site/en/live-2022/index.html from ./src/en/live-2022.html (njk)
[11ty] Writing _site/en/products/new/index.html from ./src/en/products/new.html (njk)
[11ty] Writing _site/es/index.html from ./src/es/index.html (njk)
[11ty] Writing _site/pt/index.html from ./src/pt/index.html (njk)
[11ty] Writing _site/en/services/new/index.html from ./src/en/services/new.html (njk)
[11ty] Writing _site/es/productos/nuevos/index.html from ./src/es/productos/nuevos.html (njk)
[11ty] Writing _site/pt/produtos/novos/index.html from ./src/pt/produtos/novos.html (njk)
[11ty] Writing _site/es/servicios/nuevos/index.html from ./src/es/servicios/nuevos.html (njk)
[11ty] Writing _site/pt/serviços/novos/index.html from ./src/pt/serviços/novos.html (njk)
[11ty] Benchmark   1397ms  83%     1× (Data) `./src/_data/blog.js`
[11ty] Copied 707 files / Wrote 15 files in 1.68 seconds (112.0ms each, v1.0.2)

[pdehaan]

https://github.com/bsastregx/gwds-eleventy-public/blob/88aaa6eee0c1c29a4ff64859823d3d0e7fb12081/src/hydrate/index.js#L3877-L3882

  fetch(input, init) {
    if (typeof fetch === 'function') {
      return fetch(input, init);
    }
    throw new Error(`fetch() not implemented`);
  }

That looks possibly relevant/related.

Also these seem to appear in stack traces:

• https://github.com/bsastregx/gwds-eleventy-public/blob/88aaa6eee0c1c29a4ff64859823d3d0e7fb12081/src/hydrate/index.js#L9803-L9818
• https://github.com/bsastregx/gwds-eleventy-public/blob/88aaa6eee0c1c29a4ff64859823d3d0e7fb12081/src/hydrate/index.js#L9722-L9740

But I'm not really sure what the whole logo SVG code is doing. My rough and uneducated and untested guess based on the first error message:

Original error stack trace: TypeError: Failed to parse URL from /assets/icons/globe.svg

Is that maybe the SVG fetching/rehydrating/whatever code might expect a fully qualified domain+path?

git grep /assets/icons/globe.svg src | wc -l # 11 (but all seemed to be minified output which wasn't super easy to search through)
git grep /assets/icons/globe.svg src/**/*.html | wc -l # 0

[bsastregx]

@pdehaan Thanks a lot for taking the time to work on this, I really appreciate it. I will try to fix this later, keeping in mind the new information that you provided, and I will let you know the outcome. Thanks a lot!