Error: Cannot read properties of undefined (reading '_data')

[hi-reeve]

Version

nuxt-directus: 5.6.0
nuxt: 3.8.2

Reproduction Link

https://github.com/hi-reeve/nuxt-directus-test

Steps to reproduce

1. use nuxt-directus with asyncData
2. an error occured
3. set asyncdata option to server:false
4. data fetched

What is Expected?

1. fetching data on serverside with no error

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
    devtools: { enabled: true },
    runtimeConfig: {
        dbConnectionString: process.env.DIRECTUS_DIRECT_URL,
        directus: {
            url: process.env.DIRECTUS_APP_URL,
        },
    },
    modules: ["@nuxt/image", "@unocss/nuxt", "nuxt-directus"],
    imports: {
        dirs: ["libs/**", "composables/**"],
    },
    directus: {
        devtools: true,
        url: process.env.DIRECTUS_APP_URL,
        token: process.env.DIRECTUS_API_TOKEN,
    },
    experimental: {
        componentIslands: true,
        typedPages: true,
    },
});

the code

<script setup lang="ts">
import { type Blog } from "@/types/blog";

const { getItems } = useDirectusItems();
const {
    data: blogList,
    pending: loading,
    error,
} = await useAsyncData("bloglist", () =>
    getItems<Blog>({
        collection: "blog",
    })
);
const { data: blogListClient, pending: loadingClient } = await useAsyncData(
    "bloglist-client",
    () =>
        getItems<Blog>({
            collection: "blog",
        }),
    {
        server: false,
    }
);
</script>

<template>
    <div>
        <div>
            <p>Server Side</p>

            <div>
                {{ error }}
            </div>
            <p v-if="loading">Loading...</p>
            <pre v-else>{{ blogList }}</pre>
        </div>
        <div>
            <p>Client side</p>
            <p v-if="loadingClient">Loading...</p>
            <pre v-else>{{ blogListClient }}</pre>
        </div>
    </div>
</template>

the result

[sandros94]

While to me, at first glance, this doesn't much look like a nuxt-directus issue. Could you confirm that you aren't getting hydration errors/warnings in the browser's devtool console?

[hi-reeve]

While to me, at first glance, this doesn't much look like a nuxt-directus issue. Could you confirm that you aren't getting hydration errors/warnings in the browser's devtool console?

no there is no hydration error

[Intevel]

Is there any chance that you can create a smaller reproduction project whichs only related to nuxt-directus?

[hi-reeve]

Is there any chance that you can create a smaller reproduction project whichs only related to nuxt-directus?

yes. here's the link. i use sqlite on this one so you should easily setup this one

https://github.com/hi-reeve/nuxt-directus-bug

[sandros94]

Is there any chance that you can create a smaller reproduction project whichs only related to nuxt-directus?

yes. here's the link. i use sqlite on this one so you should easily setup this one

https://github.com/hi-reeve/nuxt-directus-bug

Other than filling up the .envs and adding a generic cors to directus with CORS_ENABLED=true and CORS_ORIGIN=*, everything works fine on my side

[JsonBorn64]

I have a very similar problem. "createItems" throws an error "Cannot read properties of undefined (reading 'data') at createItems", although creation is successful and everything works as expected.

UPD:
That was my fault. After creating an item, the directus should return the ID, but it couldn’t because my access rights prohibited reading these items, only creation was allowed. And therefore, "createItems" threw an error even if successful.

[hi-reeve]

Is there any chance that you can create a smaller reproduction project whichs only related to nuxt-directus?

yes. here's the link. i use sqlite on this one so you should easily setup this one
https://github.com/hi-reeve/nuxt-directus-bug

Other than filling up the .envs and adding a generic cors to directus with CORS_ENABLED=true and CORS_ORIGIN=*, everything works fine on my side

sadly this is not working on my side.
setting up cors still have the issue for me
please reopen this @Intevel

[Intevel]

And there is no error from nuxt-directus logged in the browser console?

[sandros94]

sadly this is not working on my side. setting up cors still have the issue for me please reopen this @Intevel

Might be worth a shot, since it is the only other change I did on my side:

in /apps/web/server/middleware/log.ts I commented the console.log (since it was only spamming 20+logs/s during server startup)

export default defineEventHandler(event => {
    //console.log(`new request: ${event._path}`);
});

I wouldn't be surprised, on a laptop, to see the node server being slowed down by the OS at a point where it wouldn't also let it fetch the data from directus.

But honestly, without other information, this one is quite hard to debug

[hi-reeve]

sadly this is not working on my side. setting up cors still have the issue for me please reopen this @Intevel

Might be worth a shot, since it is the only other change I did on my side:

in /apps/web/server/middleware/log.ts I commented the console.log (since it was only spamming 20+logs/s during server startup)

export default defineEventHandler(event => {
    //console.log(`new request: ${event._path}`);
});

I wouldn't be surprised, on a laptop, to see the node server being slowed down by the OS at a point where it wouldn't also let it fetch the data from directus.

But honestly, without other information, this one is quite hard to debug

no this also does not help.
what should i do to provide more information?

[sandros94]

what should i do to provide more information?

That's the hard part, basically any log/error regarding fetch or directus could help.
But if you see none both in the browser console and server terminal we don't have something to debug.

Currently I have no idea in mind other than starting from a clean state (no .nuxt and node_modules folders), but I suppose you already did this when creating the second, smaller, reproduction.

[hi-reeve]

what should i do to provide more information?

That's the hard part, basically any log/error regarding fetch or directus could help. But if you see none both in the browser console and server terminal we don't have something to debug.

Currently I have no idea in mind other than starting from a clean state (no .nuxt and node_modules folders), but I suppose you already did this when creating the second, smaller, reproduction.

here im just trying to directly use directus sdk and even using directus sdk directly got an error fetching the data from server side using async data. i supposed this has something to do with directus sdk or directus setup, but still cannot find the source of the problem

[sandros94]

here im just trying to directly use directus sdk and even using directus sdk directly got an error fetching the data from server side using async data. i supposed this has something to do with directus sdk or directus setup

Could you use Postman/Hoppscotch/HTTPie to quickly test your http://localhost:8055/items/posts REST API endpoint? This way we could simply rule out a potential Directus setup/config problem and focus on Nuxt side of things

[hi-reeve]

here im just trying to directly use directus sdk and even using directus sdk directly got an error fetching the data from server side using async data. i supposed this has something to do with directus sdk or directus setup

Could you use Postman/Hoppscotch/HTTPie to quickly test your http://localhost:8055/items/posts REST API endpoint? This way we could simply rule out a potential Directus setup/config problem and focus on Nuxt side of things

yes, it does work. so it is nuxt related problems?

[Intevel]

Can you try to make the request using ofetch and check if the issue still persists?

[hi-reeve]

Can you try to make the request using ofetch and check if the issue still persists?

this is the result

i try to do it using a few alternative fetch

[hi-reeve]

i found a solution, i think this happen related to this error on nodejs 18 nodejs/node#40702
the error occurs when i use node 18.16.0
i tried upgrading to node 18.19.0 and it is works fine now. i don't know if this is an ideal solution

[sandros94]

i found a solution, [...] and it is works fine now.

You mean with ofetch and not only fetch native right?
Indeed I'm currently on node 20.6.1 so that might be it

[hi-reeve]

i found a solution, [...] and it is works fine now.

You mean with ofetch and not only fetch native right?

Indeed I'm currently on node 20.6.1 so that might be it

yes i tried everything including axios. and the result the same. the only solution is to upgrade node version

[hi-reeve]

i found a solution, [...] and it is works fine now.

You mean with ofetch and not only fetch native right? Indeed I'm currently on node 20.6.1 so that might be it

can you help confirm this really happen when you use node 18.16.0 ?

[sandros94]

can you help confirm this really happen when you use node 18.16.0 ?

I'll try to test it, once I get back home

[sandros94]

So, I can confirm that on 18.16.0 there is indeed a fetch issue, so updating it is the way to go.

But now that I think about it I remember reading in the nuxt 3.8.0 release a fetch rewrite using native node fetch for nitro 2.7.0, more in particular in nitro/#724.

Anyway, I would consider this issue closed since, to me, it does not seem to be directly related to nuxt-directus itself, but just a combination of node+nuxt versions

[hi-reeve]

So, I can confirm that on 18.16.0 there is indeed a fetch issue, so updating it is the way to go.

But now that I think about it I remember reading in the nuxt 3.8.0 release a fetch rewrite using native note fetch for nitro 2.7.0, more in particular in nitro/#724.

Anyway, I would consider this issue closed since, to me, it does not seem to be directly related to nuxt-directus itself, but just a combination of node+nuxt versions

thankyou!