#cards components

1 messages · Page 1 of 1 (latest)

hot flaxBOT
#

Hi @prisma bison. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Veo que estás teniendo un problema con la importación de componentes Cards y Card de 'nextra/components' que está causando un error en Vercel.

El error que estás experimentando: "Attempted import error: 'Card' is not exported from 'nextra/components'" indica que el componente Card no está siendo exportado desde el paquete que estás intentando importar.

Basado en la información disponible en las fuentes de conocimiento, este problema parece estar relacionado con la forma en que se importan y exportan componentes en Next.js. Hay varios patrones comunes que pueden causar este tipo de errores:

  1. Podría ser un problema con componentes de terceros que no tienen la directiva "use client" cuando se necesita, como se menciona en Server and Client Composition Patterns.

  2. También podría estar relacionado con la forma en que se exportan los componentes. Según un problema similar en GitHub, las exportaciones con patrones como export const { Component } = ... pueden causar errores de importación en Next.js.

  3. Otra posibilidad es un problema con la resolución de módulos o rutas absolutas, como se menciona en otro problema de GitHub.

Para resolver este problema, podrías intentar:

  1. Verificar la documentación oficial de Nextra para asegurarte de que estás importando los componentes correctamente.

  2. Si estás usando una versión específica de Nextra, verifica si hay cambios en la API entre versiones.

  3. Intenta importar los componentes individualmente o verifica si hay una forma alternativa de importarlos.

  4. Si estás usando un template como Mantine Next.js + Nextra, revisa cómo se implementan los componentes allí.

#

Si necesitas una solución alternativa, podrías considerar crear tus propios componentes Card o usar otra biblioteca de componentes compatible con Next.js.

Lo siento, pero no puedo proporcionar una solución más específica ya que las fuentes de conocimiento no contienen información detallada sobre los componentes Cards y Card de Nextra.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

prisma bison
#

@hot flax
La versión que estoy usando actualmente:

  "next": "^13.0.6",
  "nextra": "latest",
  "nextra-theme-docs": "latest",
  ...
}```

o

```nextra: 2.2.14
nextra-theme-docs: 2.2.14```

Al usar el metodo de nextra/components en la carpeta de components no aparece nada de cards.
hot flaxBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Veo que estás teniendo problemas con los componentes Cards de Nextra en Next.js 13.0.6. Según la información que proporcionas sobre las versiones que estás utilizando, puedo identificar que este es un problema relacionado con la exportación de componentes en Nextra.

Basado en la información disponible, parece que estás experimentando un problema similar al descrito en algunos issues de GitHub relacionados con Next.js, donde ciertos componentes no se exportan correctamente o hay problemas con la resolución de módulos.

Para tu versión específica de Next.js (13.0.6) y Nextra (2.2.14), es posible que la sintaxis de importación que estás utilizando no sea la correcta para esa versión en particular.

Algunas posibles soluciones que podrías intentar:

  1. Verifica si los componentes Cards están disponibles en otra ruta de importación. Por ejemplo, podrías intentar:

    import { Cards, Card } from 'nextra-theme-docs/components'

  2. Otra posibilidad es que necesites actualizar tus dependencias. Next.js 13.0.6 es una versión relativamente antigua (lanzada en 2022), y podrías estar experimentando problemas de compatibilidad. Considera actualizar a una versión más reciente siguiendo la guía de actualización oficial.

  3. Si estás utilizando "latest" para nextra y nextra-theme-docs, considera fijar versiones específicas que sean compatibles entre sí y con tu versión de Next.js.

  4. Revisa la documentación oficial de Nextra para tu versión específica para confirmar la forma correcta de importar estos componentes.

Si el problema persiste, podrías considerar crear tus propios componentes Card como alternativa, o buscar ejemplos específicos de implementación de Cards en proyectos que utilicen la misma versión de Nextra que estás usando.

#

También ten en cuenta que al usar "latest" en tus dependencias, podrías estar obteniendo versiones incompatibles entre sí. Es una buena práctica especificar versiones exactas para evitar problemas de compatibilidad inesperados.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

prisma bison
#

@hot flax [13:28:33.712] Running build in Washington, D.C., USA (East) – iad1
[13:28:33.740] Cloning github.com/Potyh/zelicraft-help (Branch: main, Commit: 02fa6ff)
[13:28:34.734] Cloning completed: 993.000ms
[13:28:35.217] Restored build cache from previous deployment (ALwS2tnHfu6W5ok8dYkfrfKp23E7)
[13:28:35.614] Running "vercel build"
[13:28:36.099] Vercel CLI 41.6.2
[13:28:36.493] Detected pnpm-lock.yaml version 6 generated by pnpm@8.x
[13:28:36.507] Installing dependencies...
[13:28:37.398] Lockfile is up to date, resolution step is skipped
[13:28:37.447] Already up to date
[13:28:37.714]
[13:28:37.728] Done in 1.1s
[13:28:37.742] Detected Next.js version: 13.0.6
[13:28:37.752] Running "pnpm run build"
[13:28:38.166]
[13:28:38.166] > nextra-docs-template@0.0.1 build /vercel/path0
[13:28:38.166] > next build
[13:28:38.166]
[13:28:38.724] info - Linting and checking validity of types...
[13:28:41.438] info - Creating an optimized production build...
[13:28:41.499] warn - Found lockfile missing swc dependencies, run next locally to automatically patch
[13:28:42.038] Browserslist: caniuse-lite is outdated. Please run:
[13:28:42.038] npx browserslist@latest --update-db
[13:28:42.038] Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
[13:28:43.921] [nextra] The repository is shallow cloned, so the latest modified time will not be presented. Set the VERCEL_DEEP_CLONE=true environment variable to enable deep cloning.
[13:28:50.010] Failed to compile.
[13:28:50.011]
[13:28:50.011] ./pages/intro.mdx
[13:28:50.012] Module not found: Package path ./components is not exported from package /vercel/path0/node_modules/nextra-theme-docs (see exports field in /vercel/path0/node_modules/nextra-theme-docs/package.json)
[13:28:50.012]
[13:28:50.012]
[13:28:50.013] > Build failed because of webpack errors
[13:28:50.036]  ELIFECYCLE  Command failed with exit code 1.
[13:28:50.054] Error: Command "pnpm run build" exited with 1
[13:28:50.229]

GitHub
GitHub - browserslist/browserslist: 🦔 Share target browsers betw...

🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env - browserslist/browserslist

hot flaxBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Veo que estás teniendo un problema con tu despliegue en Vercel, específicamente un error de módulo no encontrado relacionado con Nextra. El error principal es:

Module not found: Package path ./components is not exported from package /vercel/path0/node_modules/nextra-theme-docs

Este error indica que estás intentando importar componentes desde nextra-theme-docs/components, pero esta ruta no está definida en el campo exports del archivo package.json de nextra-theme-docs.

Basado en nuestra conversación anterior y este nuevo error, puedo identificar que el problema está relacionado con la forma en que estás importando los componentes Cards y Card en tu archivo intro.mdx.

Posibles soluciones:

  1. Verifica la importación correcta para tu versión de Nextra:
    En Nextra 2.2.14 (que es la versión que mencionaste), es posible que la ruta de importación correcta sea diferente. Intenta usar:

    import { Cards, Card } from 'nextra/components'

    en lugar de importar desde 'nextra-theme-docs/components'.

  2. Actualiza tus dependencias:
    Estás usando Next.js 13.0.6, que es una versión bastante antigua. Considera actualizar a una versión más reciente, ya que según Version History, ha habido cambios significativos desde entonces.

  3. Configura variables de entorno para un clonado profundo:
    En los logs, hay un mensaje que indica:

    [nextra] The repository is shallow cloned, so the latest modified time will not be presented. Set the VERCEL_DEEP_CLONE=true environment variable to enable deep cloning.

    Aunque esto no está directamente relacionado con tu error, podría ayudar con otros problemas potenciales.

#
  1. Revisa la documentación oficial de Nextra:
    Asegúrate de que estás siguiendo la documentación correcta para tu versión específica de Nextra.

Este tipo de error es común cuando hay incompatibilidades entre versiones o cuando la estructura de exportación de un paquete ha cambiado. Dado que estás usando "latest" para nextra y nextra-theme-docs en tu package.json, es posible que estés obteniendo versiones que no son totalmente compatibles con tu configuración actual.

Te recomendaría fijar versiones específicas para todos tus paquetes y asegurarte de que estás siguiendo la documentación correspondiente a esas versiones específicas.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

prisma bison
#

@hot flax quiero actualizar nextra a la 4.0

hot flaxBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

Veo que quieres actualizar Nextra a la versión 4.0. Aunque las fuentes de conocimiento proporcionadas no contienen información específica sobre la actualización de Nextra, puedo ofrecerte orientación sobre cómo actualizar paquetes en un proyecto Next.js, que es el framework sobre el que se construye Nextra.

Para actualizar Nextra a la versión 4.0, puedes seguir un enfoque similar al que se utiliza para actualizar Next.js:

  1. Primero, actualiza tus dependencias usando tu gestor de paquetes preferido:
npm install nextra@4.0 nextra-theme-docs@4.0

o si usas pnpm (como parece que estás usando según tus logs anteriores):

pnpm add nextra@4.0 nextra-theme-docs@4.0
  1. También es recomendable asegurarte de que estás utilizando una versión compatible de Next.js. Según la guía de actualización de Next.js, puedes usar el siguiente comando para actualizar a la última versión:
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
  1. Si estás utilizando TypeScript, asegúrate de actualizar también los tipos:
npm i -D @types/react@latest @types/react-dom@latest

Después de actualizar, revisa la documentación oficial de Nextra para ver si hay cambios en la API o en la forma de importar componentes, ya que esto podría resolver el problema que estabas teniendo con los componentes Cards.

Ten en cuenta que al actualizar a versiones más recientes, es posible que necesites hacer cambios adicionales en tu código para adaptarlo a las nuevas APIs o patrones. Revisa siempre las notas de la versión o la documentación de migración para Nextra 4.0 para identificar posibles cambios importantes.

#

También, considerando que estabas usando Next.js 13.0.6, que es bastante antiguo, una actualización a versiones más recientes podría requerir cambios significativos en tu aplicación, especialmente si decides migrar al App Router que se introdujo en versiones posteriores.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: