Nuxt•4w ago

Nuxt Dynamic Route Issue: ID Switching to 'preload.js.map' Unexpectedly

I have a very simple dynamic route. The page is in the following directory: ~/pages/explore/initiative/[id].vue When I navigate to that page via NuxtLink, it seems to be making the request several times. I added the following code to [id].vue to verify if this is the case

const route = useRoute()
const initiativeId = route.params.id;
console.log("Route Params: ", route.params.id);

const route = useRoute()
const initiativeId = route.params.id;
console.log("Route Params: ", route.params.id);

Here's an example of the output

Route Params:  18

 WARN  [@vue/server-renderer] Skipped rendering unsafe attribute name: "

Route Params:  preload.js.map

Route Params:  18

 WARN  [@vue/server-renderer] Skipped rendering unsafe attribute name: "

Route Params:  preload.js.map

So it seems that the ID is being switched to preload.js.map. I didn't write any code to that switch, so it seems to be the framework making the request or some other package included within. Not sure if this is relevant, but there's also an index.vue page in ~/pages/explore/initiative/index.vue

3 Replies

kapa.ai•4w ago

Hi @kāné. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue you're experiencing seems to be related to how Nuxt handles dynamic routes and asset preloading. Let's break down the problem and provide some insights based on the available information. 1. Dynamic Route Setup: Your dynamic route setup in ~/pages/explore/initiative/**id].vue is correct according to the Nuxt 3 routing conventions [Nuxt Routing Documentation (https://nuxt.com/docs/getting-started/routing#pages). 2. Multiple Requests: The multiple requests you're seeing might be related to Nuxt's automatic component and payload prefetching behavior. When using <NuxtLink>, Nuxt automatically prefetches components and payloads of linked pages for faster navigation Nuxt Link Documentation (https://nuxt.com/docs/api/components/nuxt-link). 3. preload.js.map Issue: The unexpected switch to preload.js.map could be related to how Nuxt handles sourcemaps and chunk loading. This behavior might be connected to Nuxt's built-in support for handling chunk loading errors Error Handling Documentation (https://nuxt.com/docs/getting-started/error-handling#errors-with-js-chunks). To address this issue, you can try the following: 1. Disable Sourcemaps: Try disabling sourcemaps in your Nuxt configuration to see if it resolves the issue:
export default defineNuxtConfig({ sourcemap: false })
export default defineNuxtConfig({ sourcemap: false })
2. Manual Preloading: Instead of relying on automatic preloading, you can manually preload route components using preloadRouteComponents:
// Manually preload the route preloadRouteComponents('/explore/initiative/18')
// Manually preload the route preloadRouteComponents('/explore/initiative/18')
Preload Route Components Documentation (https://nuxt.com/docs/api/utils/preload-route-components) 3. Investigate Chunk Loading: If the issue persists, you might want to investigate chunk loading behavior. You can set experimental.emitRouteChunkError to 'manual' in your Nuxt config to handle chunk loading errors yourself:
export default defineNuxtConfig({ experimental: { emitRouteChunkError: 'manual' } })
export default defineNuxtConfig({ experimental: { emitRouteChunkError: 'manual' } })
4. Check for Conflicting Modules: Ensure that you don't have any Nuxt modules or plugins that might be interfering with the routing or asset loading process. If none of these solutions work, you might want to create a minimal reproduction of the issue and report it to the Nuxt GitHub repository, as it could be a bug in Nuxt itself Reporting Bugs Documentation** (https://nuxt.com/docs/community/reporting-bugs#figure-out-what-the-cause-might-be). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@308827449213452289> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

kānéOP•4w ago

One day it's fine, the next day its reporting it cannot find preload.js.map. And then even when I disable sourcemap, it gets stuck in an endless loop of requesting the same URL over and over again (see the video above)

Gaming

Programming

Nuxt Dynamic Route Issue: ID Switching to 'preload.js.map' Unexpectedly