Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empty meta data #67

Open
BlueBazze opened this issue Jun 7, 2024 · 2 comments
Open

Empty meta data #67

BlueBazze opened this issue Jun 7, 2024 · 2 comments

Comments

@BlueBazze
Copy link

BlueBazze commented Jun 7, 2024

It seems that all meta data for all my components are empty.
Haven't been able to find a solution for this.

Versions

{
  "nuxt": "^3.11.2",
  "nuxt-component-meta": "^0.6.4"
}

components/test.global.vue

<script lang="ts" setup>
defineProps<{hello: string}>()

</script>

<template>
  <div style="background-color: red;">
    <slot />
  </div>
</template>

.nuxt/components-meta.mjs

  "Test": {
    "mode": "all",
    "global": true,
    "prefetch": false,
    "preload": false,
    "filePath": "components/test.global.vue",
    "pascalName": "Test",
    "kebabName": "test",
    "chunkName": "components/test",
    "shortPath": "components/test.global.vue",
    "export": "default",
    "priority": 1,
    "fullPath": "/my_nuxt_app_absolute_path/components/test.global.vue",
    "meta": {
      "type": null,
      "props": [],
      "slots": [],
      "events": [],
      "exposed": []
    }
  }

When i try to log this line in my node_modules, it seems to return an empty array.

Tried defining the props in the different ways, but to no avail.
I've checked the checker, and the component is present in the tsconfig.

Tried manually installing the latest version of vue-component-meta - 2.0.19
Now it works, except for updateOutput.
It fails on https://github.com/nuxtlabs/nuxt-component-meta/blob/main/src/parser.ts#L115-L119
After the writeFile is called, memory usage goes up by about 2.5 GB then throws Javascript heap out of memory.
I am able to console log all the writeFile params, and they seem alright.
Tested on node 22.1.0 22.2.0 20.14.0
It works fine if i make it print JSON.stringify(components["Test"])

Well..... It seems fair..
Had a feeling that it was generating a lot of text..
So i tried

    await writeFile(path, "export default {\n", "utf-8");
    const cc = Object.entries(components)

    for (const [key, value] of cc) {

      await appendFile(path, `${key}: ${JSON.stringify(value)},\n`, 'utf-8' )
    }

    await appendFile(path, "\n}", 'utf-8' )

Instead of writeFile.
After taking a look at the file, it is now 210 mb before going out of heap.

After updating the printing

    Object.keys(components).forEach(component => {
      writeFileSync(join(dirname(path), "components", components[component].pascalName + ".json"), JSON.stringify(components[component], null, 2), 'utf-8')
    })

There is a total of 2 GB of json files.

@trc-mathieu
Copy link

trc-mathieu commented Jun 7, 2024

@BlueBazze I was experiencing the same issue as you (empty meta) and just figured it out. For me, some components were working and some were not. vue-component-meta doesn't support slots with empty params, this issue was fixed in vuejs/language-tools#4093

I'm not too sure if there are breaking changes but I now override the vue-component-meta to use their latest version 2.0.19 like you did and it works.

For your heap memory issue, idk but have you tried to exclude components from other modules that you don't need their meta information?

'componentMeta': {
    exclude: [
      '@nuxt/content',
      '@nuxt/ui-templates',
      '@nuxt/ui',
      '@nuxt/ui-pro',
      '@nuxtjs/color-mode',
      ...

@BlueBazze
Copy link
Author

BlueBazze commented Jun 8, 2024

I have a layer with shadcn-vue which is built on top of radix-vue. Radix uses some deep typed props, sometimes even includes HTMLElement. vue-component-meta then maps out all the types which causes some component meta's to be hundreds of MB.

Noticed the exclude allowed for a function to filter instead of the string regex.
(component: any) => !component.pascalName.startsWith("Prose")


The root of the issue is whenever the components meta data gets too big node has a problem writing the data to a file.
Along with the outdated vue-component-meta.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants