Import protection

[pi0]

Importing build dependencies (such as nuxt.config or @nuxt/kit) inside the app source code can result in misleading errors and unexpected issues. While we cannot avoid it in general, we can mitigate this mistake for common issues using aliases redirecting to a module throwing error or resolver hook that throws error instantly.

Another idea we can do is use documentation by adding warnings to TSDocs but still, users can simply not see it or ignore it in some cases. Also for doing this, we basically need to add warning to every possible import which is not possible.

App import protections: (webpack, vite)

• Internal packages (@nuxt/kit, @nuxt/nitro, ...)
• nuxt / nuxt3
• Nitro aliases like #storage
• nuxt.config
• server/* files
• Entrypoint of modules (import x from '@nuxtjs/axios')
• Node built-ins (?)
• @vue/composition-api in a Nuxt 3 application (Failed to resolve import "#build/plugins" when adding alias for @vue/composition-api #12683)

Nitro import protections: (nitro's rollup)

• App aliases #app

[codetheorist]

Is there any more progress on this issue? This seems to be related to an issue I'm having.

My queryContent("blog") code works when using the dev server and also when using the static site generator mode however, when using the production build command, no posts are returned as part of the queryContent call. If I remove the argument from the method call, then content IS returned.

Initially, the code had filtering, sorting & limiting and I've tried all variations of these three with the argument in the method call, with no joy.

My content config is as follows:

sources: {
  pages: {
    driver: "fs",
    prefix: "/pages", // All contents inside this source will be prefixed with `/pages`
    base: resolve(__dirname, "static-pages")
  },
  blog: {
    driver: "fs",
    prefix: "/blog", // All contents inside this source will be prefixed with `/blog`
    base: resolve(__dirname, "blog")
  }
}

As you can see, nothing too extravagant going on.

The code doing the actual call is:

  const { data } = await useAsyncData("featured-articles", () =>
    queryContent("blog")
      .where({
        date: { $exists: true, $lte: new Date() },
        draft: { $not: true },
        hidden: { $not: true },
        featured: { $exists: true, $eq: true }
      })
      .sort({ date: 1 })
      .limit(3)
      .find()
  );

However, as stated previously, I have tried the above without the filtering, sorting and limiting with no success. The code is added as part of a setup script blog in a standard SFC, rather than a layout file or page component.

To attempt to narrow things down further, I've also attempted with server-side fetching turned off and I've also tried exposing the refresh/execute method on useAsyncData and tried re-triggering from the client side, which still caused an empty array to be returned.

[codetheorist]

My complete component code currently looks like:

<template>
  <div
    class="d-flex align-items-center flex-column py-5 border-top border-success"
    style="border-top-width: 3px !important"
  >
    <div class="d-flex flex-column">
      <h2 class="mb-5 coloured-underline">Featured Articles</h2>
      <div>
        {{ pending ? "Pending" : "Ready" }}<br />
        {{ status }}
      </div>
      <b-btn @click="() => execute()">Fetch</b-btn>
    </div>
    <b-container>
      <b-row>
        <b-col v-for="article in data" :key="article._path" class="mb-3" cols="12" md="4">
          <ContentRenderer :value="article">
            <b-card
              :title="article.title"
              :img-alt="article.title || 'https://place-hold.it/1200x600/#28a74/#21252&text=GoTrash'"
              :img-src="article.img"
              img-top
              tag="article"
            >
              <BCardText>
                {{ article.description }}
              </BCardText>
              <b-button :to="article._path" variant="success">Read More</b-button>
            </b-card>
          </ContentRenderer>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script setup>
  const date = new Date();
  const formatter = date =>
    date.toLocaleString("en-US", {
      minimumIntegerDigits: 2,
      useGrouping: false
    });
  const { data, pending, error, status, execute } = await useAsyncData(
    "blog",
    async () => {
      const content = await queryContent("blog")
        .where({
          date: { $exists: true, $lte: new Date() },
          draft: { $not: true },
          hidden: { $not: true },
          featured: { $exists: true, $eq: true }
        })
        .sort({ date: 1 })
        .limit(3)
        .find();

      console.log("Content: %o", content);

      return content;
    },
    { server: true, lazy: false }
  );

  while (pending.value) {}

  if (error.value) console.error(error.value);
  else console.log("DATA: %o", data.value);

  onActivated(() => {
    console.log("ACTIVATED");
  });
</script>

As you can see, I've implemented numerous extra functionality to try and rule out various any other parts of the code that could be causing the issue however, as long as queryContent has an argument provided,no content is returned.

PS: I know you're probably throwing up in your mouth at the site of this code, mixing camel/kebab case for tag names, etc. I can only apologize for that. 😁

[danielroe]

@codetheorist Would you open a new issue with a reproduction?

[codetheorist]

At the moment, I've setup a base app with the minimal required config and the issue is no longer occuring. Therefore, I believe the issue is with another module, such as Sidebase Auth OR I18N. I'll keep investigation and see where this leads. When I come to a conslusion, if said conclusion isn't human stupidity at it's greatest form (me), then I shall push the code for you to investigate further. @danielroe

[danielroe]

Thank you! If it’s a third party module, importing from Nuxt Kit into runtime code deliberately causes this error (because it shouldn’t be bundled).