Nuxt•6mo ago

Cannot read properties of null (reading 'insertBefore')

Hello guys, i have a problem with a site, locally it works fine but in production when i try to access a dynamic content that is fetched from an API like this url here (https://jumisluxury.mk/categories/6-sofas) i get this error TypeError: Cannot read properties of null (reading 'insertBefore') at insert (Bg-j_vi9.js:23:178) at y (Bg-j_vi9.js:19:35157) at C (Bg-j_vi9.js:19:34790) at F (Bg-j_vi9.js:19:37217) at A (Bg-j_vi9.js:19:36586) at v (Bg-j_vi9.js:19:35509) at C (Bg-j_vi9.js:19:34888) at Oi.$ [as fn] (Bg-j_vi9.js:19:38710) at Oi.run (Bg-j_vi9.js:15:1517) at G.d.update (Bg-j_vi9.js:19:39416) if i access this url with navigating from a button it works any suggestions?

Jumis Luxury

Почетна

Jumis Luxury е водечки производител на мебел, кои нуди целосни ентериерни уредувања, од 3D визуелизација на проекти до целосно производство на мебел по мерка.

35 Replies

JockaOP•6mo ago

i build the website using pnpm generate.

manniL•6mo ago

to me that looks like a hydration error

JockaOP•6mo ago

is there a way to solve it? and what does that mean?

JockaOP•6mo ago

message.txt

JockaOP•6mo ago

here is the full component from that route

manniL•6mo ago

https://www.youtube.com/watch?v=TYyEjN0UrfA might help

Vuejs Amsterdam

YouTube

Alexander Lichter - Vue.js Hydration Demystified - Vuejs Amsterdam ...

manniL•6mo ago

ah, in the code I already see a few things like that you don't use useFetch or useAsyncData

JockaOP•6mo ago

i will watch the full video right away. so instead of $fetch i need useFetch?

manniL•6mo ago

check out https://nuxt.com/docs/getting-started/data-fetching

Nuxt

Data fetching · Nuxt

Nuxt provides composables to handle data fetching within your application.

manniL•6mo ago

"it depends" 🙂 The docs should explain in which scenario you should use which

manniL•6mo ago

also suggesting https://www.youtube.com/watch?v=njsGVmcWviY to avoid overusing useFetch 🙂

Alexander Lichter

YouTube

You are using useFetch WRONG! (I hope you don't)

💪🏻 useFetch is a mighty composable to fetch data in your Nuxt.js application. It can do so many things, from updating state to refreshing calls easily and even data caching is possible. But often I see that people misuse useFetch because it is so tempting to use all the features, even when you shouldn't. In this video I show the most common mist...

JockaOP•6mo ago

will watch this as well and one more thing, since i want the useSeoMeta to be added from the api call data, is the way i'm doing correct or wrong? since when i send for example a link i do not see the meta from the server, but the default meta.

manniL•6mo ago

it'll be easier + more clear with useFetch 🙂 it should be also correct on the server then

JockaOP•6mo ago

did not understand this last one i'm using Laravel Server and the frontend is built with pnpm generate does this mean something or not?

manniL•6mo ago

server as in "during generation" if you use static site generation

JockaOP•6mo ago

I just watched this whole video and it looks great, but the problem is that i do not get why is my way of doing it with $fetch wrong? in my case i only want to solve the problem that is caused when you refresh a component that loads data from a server. And the error i get is nothing like the errors that are explained in the first video, so i'm a bit confused what should i do to solve it.

Timar•6mo ago

The problem is that when navigating to the page the data from fetch is not there - error. And your code is not made either 1. wait for data, not throw error or 2. Fetch data and save it during generate so it doesn't have to be downloaded again

JockaOP•6mo ago

can you give me advice on how to solve it? how can i make it to wait for data? any help would be appreciated.

manniL•6mo ago

so, do you want to have the data available in the HTML you generate?

JockaOP•6mo ago

yes, i would like to use the current setup with pnpm generate while i escape this error that i get on refreshing the page where the dynamic route is fetched

<script>
const fetchProduct = async () => {
  loadingProduct.value = true;
  const { productSlug } = route.params;
  const data = await $fetch(`/products/${productSlug}`, {
    baseURL: config.public.apiBaseUrl,
  });
  product.value = data.product;
  otherProducts.value = data.otherProducts;
  loadingProduct.value = false;
};

onMounted(async () => await fetchProduct());
</script>

<script>
const fetchProduct = async () => {
  loadingProduct.value = true;
  const { productSlug } = route.params;
  const data = await $fetch(`/products/${productSlug}`, {
    baseURL: config.public.apiBaseUrl,
  });
  product.value = data.product;
  otherProducts.value = data.otherProducts;
  loadingProduct.value = false;
};

onMounted(async () => await fetchProduct());
</script>

for example something like this, how i should rewrite it in order to be working fine. and should i put ssr: false if i use pnpm generate to have a SSG site?

manniL•6mo ago

no unless you want an SPA if you need SEO you should not disable SSR

JockaOP•6mo ago

aham, yes indeed

manniL•6mo ago

the problem with SSG is that your data (relevant for SEO) will always be "outdated" and fixed to the point of building even if you load/refresh them on the client

JockaOP•6mo ago

so in order to have a better SEO i need SSR instead of SSG to get the dynamic data as the SEO meta data? btw the problem when i disable ssr: false is now gone that i explained above, if that means something

manniL•6mo ago

yes, that's correct because you don't have any hydration anymore 🙂 static data + SEO = SSG dynamic data + SEO = SSR no SEO needed = SPA

JockaOP•6mo ago

Perfect explained, thank you so much.

manniL•6mo ago

that's the basic decision tree IMO you are welcome!

manniL•6mo ago

also have a listen/look into https://share.transistor.fm/s/90ce0fd6

DejaVue

Transistor

The Need for Server-Side Rendering (SSR) | DejaVue | Episode 1

manniL•6mo ago

Michael and I discuss that there a bit more

JockaOP•6mo ago

<script>
const fetchProduct = async () => {
  loadingProduct.value = true;
  const { productSlug } = route.params;
  const data = await $fetch(`/products/${productSlug}`, {
    baseURL: config.public.apiBaseUrl,
  });
  product.value = data.product;
  otherProducts.value = data.otherProducts;
  loadingProduct.value = false;
};

onMounted(async () => await fetchProduct());
</script>

<script>
const fetchProduct = async () => {
  loadingProduct.value = true;
  const { productSlug } = route.params;
  const data = await $fetch(`/products/${productSlug}`, {
    baseURL: config.public.apiBaseUrl,
  });
  product.value = data.product;
  otherProducts.value = data.otherProducts;
  loadingProduct.value = false;
};

onMounted(async () => await fetchProduct());
</script>

also how can i rewrite this with useFetch in order to fix the issue? or is using useFetch not going to solve my problem now?

manniL•6mo ago

try sth like this

<script setup>
const productSlug = route.params.productSlug;
const { data, status, refresh } = useFetch(() => `/products/${productSlug}`, {
    baseURL: config.public.apiBaseUrl,
})
const product = computed(() => data?.product)
const otherProducts = computed(() => data?.otherProducts)

onMounted(() => refresh());
</script>

<script setup>
const productSlug = route.params.productSlug;
const { data, status, refresh } = useFetch(() => `/products/${productSlug}`, {
    baseURL: config.public.apiBaseUrl,
})
const product = computed(() => data?.product)
const otherProducts = computed(() => data?.otherProducts)

onMounted(() => refresh());
</script>

JockaOP•6mo ago

thank you let me check

manniL•6mo ago

untested 🙂 but you get the idea

JockaOP•6mo ago

yes sure, sorry for bothering you

manniL•6mo ago

np 👍

Gaming

Programming

Cannot read properties of null (reading 'insertBefore')