Nuxt•7mo 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•7mo ago

i build the website using pnpm generate.

manniL•7mo ago

to me that looks like a hydration error

JockaOP•7mo ago

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

JockaOP•7mo ago

message.txt

JockaOP•7mo ago

here is the full component from that route

manniL•7mo ago

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

Vuejs Amsterdam

YouTube

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

manniL•7mo ago

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

JockaOP•7mo ago

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

manniL•7mo 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•7mo ago

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

manniL•7mo 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•7mo 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•7mo ago

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

JockaOP•7mo 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•7mo ago

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

JockaOP•7mo 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•7mo 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•7mo 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•7mo ago

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

JockaOP•7mo 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•7mo ago

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

JockaOP•7mo ago

aham, yes indeed

manniL•7mo 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•7mo 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•7mo 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•7mo ago

Perfect explained, thank you so much.

manniL•7mo ago

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

manniL•7mo 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•7mo ago

Michael and I discuss that there a bit more

JockaOP•7mo 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•7mo 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•7mo ago

thank you let me check

manniL•7mo ago

untested 🙂 but you get the idea

JockaOP•7mo ago

yes sure, sorry for bothering you

manniL•7mo ago

np 👍

Gaming

Programming

Cannot read properties of null (reading 'insertBefore')

Did you find this page helpful?