FoxCode Posts - Answer Overflow

failOnError is set to true, and it always worked fine, but today when generating the page something went wrong, an error appeared and at the same time it did not throw an error but it is visible in the logs, why? The error was an incorrect syntax in the .md file parsed by nuxt-content. Logs:

[2024-07-15T17:37:55.994Z] [error] [unhandledRejection] bad indentation of a mapping entry (11:23)
[2024-07-15T17:37:55.994Z] 
[2024-07-15T17:37:55.994Z]   10 |     date: '2024-07-15'
[2024-07-15T17:37:55.994Z]   11 | link: ""https://github.com/xyz/l ...
[2024-07-15T17:37:55.994Z]   ----------------------------^
[2024-07-15T17:37:55.994Z]   at generateError (node_modules/js-yaml/dist/js-yaml.mjs:1273:10)
[2024-07-15T17:37:55.994Z]   at throwError (node_modules/js-yaml/dist/js-yaml.mjs:1277:9)
[2024-07-15T17:37:55.994Z]   at readBlockMapping (node_modules/js-yaml/dist/js-yaml.mjs:2272:7)
[2024-07-15T17:37:55.994Z]   at composeNode (node_modules/js-yaml/dist/js-yaml.mjs:2531:12)
[2024-07-15T17:37:55.994Z]   at readDocument (node_modules/js-yaml/dist/js-yaml.mjs:2715:3)
[2024-07-15T17:37:55.994Z]   at loadDocuments (node_modules/js-yaml/dist/js-yaml.mjs:2778:5)
[2024-07-15T17:37:55.994Z]   at Object.load$1 [as load] (node_modules/js-yaml/dist/js-yaml.mjs:2804:19)
[2024-07-15T17:37:55.994Z]   at parseFrontMatter (node_modules/remark-mdc/dist/index.mjs:33:21)
[2024-07-15T17:37:55.994Z]   at .nuxt/prerender/chunks/runtime.mjs:2132:50
[2024-07-15T17:37:55.994Z]   at parseMarkdown (.nuxt/prerender/chunks/runtime.mjs:2155:10)

[2024-07-15T17:37:55.994Z] [error] [unhandledRejection] bad indentation of a mapping entry (11:23)
[2024-07-15T17:37:55.994Z] 
[2024-07-15T17:37:55.994Z]   10 |     date: '2024-07-15'
[2024-07-15T17:37:55.994Z]   11 | link: ""https://github.com/xyz/l ...
[2024-07-15T17:37:55.994Z]   ----------------------------^
[2024-07-15T17:37:55.994Z]   at generateError (node_modules/js-yaml/dist/js-yaml.mjs:1273:10)
[2024-07-15T17:37:55.994Z]   at throwError (node_modules/js-yaml/dist/js-yaml.mjs:1277:9)
[2024-07-15T17:37:55.994Z]   at readBlockMapping (node_modules/js-yaml/dist/js-yaml.mjs:2272:7)
[2024-07-15T17:37:55.994Z]   at composeNode (node_modules/js-yaml/dist/js-yaml.mjs:2531:12)
[2024-07-15T17:37:55.994Z]   at readDocument (node_modules/js-yaml/dist/js-yaml.mjs:2715:3)
[2024-07-15T17:37:55.994Z]   at loadDocuments (node_modules/js-yaml/dist/js-yaml.mjs:2778:5)
[2024-07-15T17:37:55.994Z]   at Object.load$1 [as load] (node_modules/js-yaml/dist/js-yaml.mjs:2804:19)
[2024-07-15T17:37:55.994Z]   at parseFrontMatter (node_modules/remark-mdc/dist/index.mjs:33:21)
[2024-07-15T17:37:55.994Z]   at .nuxt/prerender/chunks/runtime.mjs:2132:50
[2024-07-15T17:37:55.994Z]   at parseMarkdown (.nuxt/prerender/chunks/runtime.mjs:2155:10)

1 replies

NNuxt

•Created by FoxCode on 6/18/2024 in #❓・help

How to make only one request when website build

I created plugin like this: https://github.com/nuxt/nuxt.com/blob/main/plugins/stats.ts but i get [error] [nitro] [unhandledRejection] [GET] "https://api.github.com/repos/xyz": 429 too many requests xtimes on yarn generate. I changed $fetch('https://api.nuxt.com/stats') to

 Promise.all([$fetch("https://api.github.com/repos/xyz"), $fetch("https://api.github.com/repos/xyz")]).then((data) => {
                data.forEach((el) => {
                    ghStars.value += el?.stargazers_count || 0
                })
            })

 Promise.all([$fetch("https://api.github.com/repos/xyz"), $fetch("https://api.github.com/repos/xyz")]).then((data) => {
                data.forEach((el) => {
                    ghStars.value += el?.stargazers_count || 0
                })
            })

3 replies

NNuxt

•Created by FoxCode on 6/10/2024 in #❓・help

OnMounted twice

2 replies

NNuxt

•Created by FoxCode on 5/17/2024 in #❓・help

Accordion in nuxt-content

I want to create accordion component for nuxt-content markdown. I thought it would use NuxtUI Accordion (https://ui.nuxt.com/components/accordion) I would like every H2 to be turned into a title in accordion and the rest of the content to be hidden to make markdown look normal, like here:

::accordion
## This is accordion title
This is accordion **content**
1. something
2. something2
## New title here
Hello world
## End
Something here too
::

::accordion
## This is accordion title
This is accordion **content**
1. something
2. something2
## New title here
Hello world
## End
Something here too
::

Or if it is possible to create multiple slots simultaneously:

::accordion
#title
This is **FAQ** title 1
#content
This is content for FAQ-1
#title
This is FAQ title 2
#content
This is content for FAQ-2?
::

::accordion
#title
This is **FAQ** title 1
#content
This is content for FAQ-1
#title
This is FAQ title 2
#content
This is content for FAQ-2?
::

But I don't know how to get to the slots in the normal way, I tried:

<template>
    <div>
        <div class="title">
            <MDCSlot :body="items[0].title" />
        </div>
    </div>
</template>

<script setup>
const slots = useSlots()

const defaultSlotContent = slots.default();

const items = []
let item = {
    title: '',
    body: []
}
defaultSlotContent.forEach((node) => {
    if (node.type.tag == "h2") {
        if (item.title) {
            items.push(item)
            item = { title: '', body: [] }
        }
        item.title = node
    } else {
        item.body.push(node)
    }
})
console.log("items", items)
</script>

<template>
    <div>
        <div class="title">
            <MDCSlot :body="items[0].title" />
        </div>
    </div>
</template>

<script setup>
const slots = useSlots()

const defaultSlotContent = slots.default();

const items = []
let item = {
    title: '',
    body: []
}
defaultSlotContent.forEach((node) => {
    if (node.type.tag == "h2") {
        if (item.title) {
            items.push(item)
            item = { title: '', body: [] }
        }
        item.title = node
    } else {
        item.body.push(node)
    }
})
console.log("items", items)
</script>

but MDCSlot runs the entire $slots.default, and using the same slot name makes it rendered one at a time Or if its not worth doing - can I use slots like this?

::accordion
---
items:
    - 
        label: "What this guide is about"
        slot: "test"
    - label: "Title here"
---
#test
Hello world
::

::accordion
---
items:
    - 
        label: "What this guide is about"
        slot: "test"
    - label: "Title here"
---
#test
Hello world
::

Accordion.vue: <UAccordion :items="items" />

2 replies

NNuxt

•Created by FoxCode on 5/6/2024 in #❓・help

How to use new nuxt-icon with nuxt-ui

When will nuxt-icon be in v1.0.0-beta.1 version for nuxt-ui? Can I somehow use the latest version of nuxt-icon for nuxt-ui?

7 replies

NNuxt

•Created by FoxCode on 5/6/2024 in #❓・help

Cannot use <slot> inside component

I get infinite warn like this:

Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead

Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead

when I create on new nuxt, nuxt-content, nuxt-icon: Section.vue:

<template>
<div>
<ContentSlot name="title" />
<div>
<slot/>
</div>
</div>
</template>

<template>
<div>
<ContentSlot name="title" />
<div>
<slot/>
</div>
</div>
</template>

Container.vue:

<template>
<div>
<slot />
</div>
</template>

<template>
<div>
<slot />
</div>
</template>

index.md:

::section
#title
My title
#default
::::container
Test
::::
::

::section
#title
My title
#default
::::container
Test
::::
::

4 replies

NNuxt

•Created by FoxCode on 3/18/2024 in #❓・help

useRoute not working with static website?

Hi, why class "active" is not working with prerender static website? My reproduction code: https://stackblitz.com/edit/github-xwmppm?file=pages%2Findex.vue Code is like this:

<template>
    <div>
        Current active tab: {{ activeTab }}
        <div>
            buttons:
        </div>
        <button :class="{ 'active': activeTab === 0 }">Button 0</button>
        <button :class="{ 'active': activeTab === 1 }">Button 1</button>
        <button :class="{ 'active': activeTab === 2 }">Button 2</button>
        <button :class="{ 'active': activeTab === 3 }">Button 3</button>
        <button :class="{ 'active': activeTab === 4 }">Button 4</button>
    </div>
</template>

<script setup>
const activeTab = ref(0)
const route = useRoute()
activeTab.value = route.query?.active * 1
</script>

<style scoped>
.active {
    background-color: cyan;
}
</style>

<template>
    <div>
        Current active tab: {{ activeTab }}
        <div>
            buttons:
        </div>
        <button :class="{ 'active': activeTab === 0 }">Button 0</button>
        <button :class="{ 'active': activeTab === 1 }">Button 1</button>
        <button :class="{ 'active': activeTab === 2 }">Button 2</button>
        <button :class="{ 'active': activeTab === 3 }">Button 3</button>
        <button :class="{ 'active': activeTab === 4 }">Button 4</button>
    </div>
</template>

<script setup>
const activeTab = ref(0)
const route = useRoute()
activeTab.value = route.query?.active * 1
</script>

<style scoped>
.active {
    background-color: cyan;
}
</style>

npm run generate
npm run preview

npm run generate
npm run preview

and localhost:3000?active=0 NOT WORKING

npm run dev

npm run dev

and localhost:3000?active=0 WORKING Why and how to fix that?

1 replies

NNuxt

•Created by FoxCode on 7/6/2023 in #❓・help

JavaScript heap out of memory with v3.6.2

I have quite a few .md files using nuxt-content, yarn generate usually took a few minutes, but after upgrading to the latest version of nuxt after a while it throws a JavaScript heap out of memory error. Why is nuxt now consuming so much memory, how to check the memory consumption and can it be optimized somehow FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

1 replies

NNuxt

•Created by FoxCode on 7/6/2023 in #❓・help

Upgrade is not possible with nuxi upgrade and yarn

nuxi upgrade --force at first, it removes yarn.lock, which leads to an error:

Usage Error: The nearest package directory (/home/x/y/website3) doesn't seem to be part of the project declared in /home/x/y.

- If /home/x/y isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If /home/x/y is intended to be a project, it might be that you forgot to list /website in its workspace configuration.
- Finally, if /home/x/y is fine and you intend /website to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.

Usage Error: The nearest package directory (/home/x/y/website3) doesn't seem to be part of the project declared in /home/x/y.

- If /home/x/y isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If /home/x/y is intended to be a project, it might be that you forgot to list /website in its workspace configuration.
- Finally, if /home/x/y is fine and you intend /website to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.

I use the last option, /website is a completely separate project in monorepo. How can I fix it?

1 replies

NNuxt

•Created by FoxCode on 6/7/2023 in #❓・help

Sourcemap for "[...]/components/content/Component.vue" points to missing source files

When I updated Nuxt to the latest version WARNs appear to me:

WARN Sourcemap for "[...]/components/content/Component.vue" points to missing source files
WARN Sourcemap for "[...]/components/content/ComponentX.vue" points to missing source files

WARN Sourcemap for "[...]/components/content/Component.vue" points to missing source files
WARN Sourcemap for "[...]/components/content/ComponentX.vue" points to missing source files

etc. How do I turn it off, or fix it?

1 replies

NNuxt

•Created by FoxCode on 3/10/2023 in #❓・help

Reduce unused javascript (nuxt)

30 replies

NNuxt

•Created by FoxCode on 1/26/2023 in #❓・help

Detect new deploy

Hey, is the issue of changing chunks during deploy fixed? Currently when a user is on the site during deploy, the files change and he gets a 404. Is there any ready way in nuxt 3 to force a refresh or something like that?

1 replies

Gaming

Programming