"fetch is not defined" on vuepress build

Question

I am trying to build a static site with vuepress. I have a vue component that is used that uses the javascript fetch library. It looks like this:

<template>
<div>
    <p> {{totalVuePackages}} </p>
</div>
</template>

<script>
export default {
  name: "get-request",
  data() {
    return {
      totalVuePackages: null
    };
  },
  created() {
    fetch("https://api.npms.io/v2/search?q=vue")
      .then(response => response.json())
      .then(data => (this.totalVuePackages = data.total));
  }
};
</script>

If I use vuepress dev it works perfectly with no errors. However, when I use vuepress build I get the following error:

ReferenceError: fetch is not defined

I'm new to vue and javascript, but I was under the assumption that fetch is a built-in javascript method that runs on the clientside.

If you are trying to use the built-in `fetch` - why are you including another `fetch` library? — IVO GELOV, Feb 01 '21 at 08:03

score 3 · Accepted Answer · answered Feb 01 '21 at 08:28

build process is done in node environment instead of browser, that's why fetch is not defined.

vuepress calls created hook to produce static html files. if you want to call fetch only on client side, you should call it on mounted hook instead which will not be called in build process.

"fetch is not defined" on vuepress build

1 Answers1