Romain 'Maz' B. Comments - Answer Overflow

Topics

Romain 'Maz' B.

•Created by Romain 'Maz' B. on 7/5/2024 in #❓・help

Migration v2 to v3 increased the build time by 10+

@manniL / TheAlexLichter just to inform you since you are most active than me here. I tried a long shot this morning when discovered this gitlab runner issue: https://forum.gitlab.com/t/high-output-crashed-gitlab-runner-sync-with-gitlab-job/62068 I noticed that the gitlab instance actually crashed when nuxt was building, then it has to reboot and then continue the build (which is why the build time was so long). I just modified my CI job to make it silent:

- node run build --log-level silent

- node run build --log-level silent

Now my app is built in less than 3 minutes 🙂

10 replies

•Created by Romain 'Maz' B. on 7/5/2024 in #❓・help

Migration v2 to v3 increased the build time by 10+

As a side note: I tried to build the app on my local machine, the build time is acceptable, like 3-4 minutes without all the cache optimization and so on... This may have something with the server configuration, but why? What could cause the build time to be so long? The CI process is ran by an hosted gitlab-runner, so there cpu/memory limitation is the machine one detailed earlier.

10 replies

•Created by Romain 'Maz' B. on 7/5/2024 in #❓・help

Migration v2 to v3 increased the build time by 10+

What could help? Here are the full build log and my nuxt config. https://gist.github.com/RomainMazB/fa9bbe28fcc8b33feb352b607b82e402

10 replies

•Created by Romain 'Maz' B. on 7/5/2024 in #❓・help

Migration v2 to v3 increased the build time by 10+

I almost doubled the server performance: now 16Gb RAM & 6vCPU, the build time remains the same: 16 minutes for the last build, and still that huge 251 seconds to prerender one route...

10 replies

•Created by Denis Jankelaic on 3/21/2024 in #❓・help

Memory leaks since 3.9.0 version.

No description

11 replies

•Created by Denis Jankelaic on 3/21/2024 in #❓・help

Memory leaks since 3.9.0 version.

No description

11 replies

•Created by Denis Jankelaic on 3/21/2024 in #❓・help

Memory leaks since 3.9.0 version.

Thanks for this! I am experiencing memory leak issue with a SSR nuxt managed by 4 workers through PM2 so it was 4x700mb memory usage for an app used by 20 users... Can't tell for now if this will fix the issue but sentry was executed on both server & client side.

11 replies

•Created by Romain 'Maz' B. on 5/30/2024 in #❓・help

useFetch data is correctly filled but data.value is null?!

No description

4 replies

•Created by Romain 'Maz' B. on 5/30/2024 in #❓・help

useFetch data is correctly filled but data.value is null?!

I've found this reddit thread which exposes the same problem but not the solution 😢 https://www.reddit.com/r/vuejs/comments/10601h3/i_can_get_a_ref_object_but_using_value_returns/

4 replies

•Created by Romain 'Maz' B. on 4/26/2024 in #❓・help

What's the trick to dev/build from nuxt content package fetch from github?

Ok. Just discovered the edge-chanel https://content.nuxt.com/get-started/edge-channel

2 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

This way, component are lazy imported and I don't need to maintain a mapping array for the new components 🔥

24 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

import { defineAsyncComponent } from 'vue'
// Lazy imports from vite: https://vitejs.dev/guide/features.html#glob-import
const buildings = import.meta.glob('./notepad/buildings/**/*.vue')

const buildingComp = computed(() => {
  const componentName = buildingOnSelectedTile.type

  // Here using defineAsyncComponent: https://vuejs.org/guide/components/async.html#basic-usage
  return defineAsyncComponent(buildings[`./notepad/buildings/${componentName}.vue`])
})

import { defineAsyncComponent } from 'vue'
// Lazy imports from vite: https://vitejs.dev/guide/features.html#glob-import
const buildings = import.meta.glob('./notepad/buildings/**/*.vue')

const buildingComp = computed(() => {
  const componentName = buildingOnSelectedTile.type

  // Here using defineAsyncComponent: https://vuejs.org/guide/components/async.html#basic-usage
  return defineAsyncComponent(buildings[`./notepad/buildings/${componentName}.vue`])
})

<component :is="buildingComp"
           v-if="buildingOnSelectedTile"
           :building="buildingOnSelectedTile"
/>

<component :is="buildingComp"
           v-if="buildingOnSelectedTile"
           :building="buildingOnSelectedTile"
/>

24 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

@orle I make it work with a pretty solution, I post it here for others

24 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

To be shorter, I may use the "Solution 1" of this SO post to not import and then map Building components one by one https://stackoverflow.com/a/72711085/11896411

24 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

No description

24 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

Using quotes makes it work but still, I can't get it work with any "dynamic" string:

// Works
resolveComponent('game-notepad-buildings-generic')

// Doesn't work
const type = 'generic'
resolveComponent('game-notepad-buildings-'+type)

// Works
resolveComponent('game-notepad-buildings-generic')

// Doesn't work
const type = 'generic'
resolveComponent('game-notepad-buildings-'+type)

As of today, I have dozens of different building types, it's a Nuxt2 app that I'm converting to Nuxt3 and previously, it worked perfectly. So I would avoid a dozens of imports if possible as mentioned in your link

24 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

@orle I continued to investigate on the "why this fails":

resolveComponent(`game-notepad-buildings-generic`)

resolveComponent(`game-notepad-buildings-generic`)

And surprisingly, it was due to the backtick, you can read more on this here: https://github.com/nuxt/nuxt/discussions/17411#discussioncomment-2568712

24 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

No description

24 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

The final code snippet:

<component :is="resolveComponentFor(buildingOnSelectedTile)" />

<component :is="resolveComponentFor(buildingOnSelectedTile)" />

function resolveComponentFor(building: Building) {
  return resolveComponent(`game-notepad-buildings-${building.type}`)
}

function resolveComponentFor(building: Building) {
  return resolveComponent(`game-notepad-buildings-${building.type}`)
}

24 replies

•Created by Romain 'Maz' B. on 11/7/2023 in #❓・help

Dynamic component import

I moved these components inside the /global directory and it works perfectly 🙂 Thanks for your time

24 replies