Home

Solucionando errores de TypeScript para archivos .mdx en Next.js

January 6, 2024

¿Te has encontrado con errores de TypeScript al intentar importar archivos .mdx en tu proyecto Next.js? Si has visto un mensaje similar a este:

text
1Cannot find module '@/post/homer.mdx' or its corresponding type declarations

Este problema a menudo surge al trabajar con archivos MDX en Next.js y TypeScript, causando frustración a los desarrolladores que buscan una solución.

El Problema

Considera el siguiente fragmento de código:

tsx
1import React from 'react'
2import Layout from '@/components/Layout/index'
3import Good from '@/post/homer.mdx'
4

5const Index = () => {
6  return (
7    <Layout>
8      <Good />
9    </Layout>
10  )
11}
12

13export default Index

A pesar de que el componente MDX se renderiza correctamente en el sitio web, TypeScript genera un error, dificultando la experiencia de desarrollo.

Mensaje de Error de TypeScript

bash
1Cannot find module '@/post/homer.mdx' or its corresponding type declarations.

Intentos de Resolver el Problema

Incluso después de explorar varias soluciones en Stack Overflow e intentar instalar paquetes como @mdx-js/mdx, el problema persiste. La frustración es palpable, con desarrolladores buscando una resolución definitiva para este inconveniente de TypeScript.

  • Una posible solución:

Implica declarar manualmente un tipo para los archivos MDX. Crea un archivo llamado mdx.d.ts en la raíz o en la carpeta types de tu proyecto y agrega el siguiente código:

tsx
1declare module '*.mdx' {
2  let MDXComponent: (props: any) => JSX.Element
3  export default MDXComponent
4}

Este enfoque informa a TypeScript sobre los tipos globales para los archivos .mdx, asegurando un uso seguro en tus archivos .tsx.

  • Segunda posible solución:

Aprovechar @types/mdx. Una opción más conveniente es instalar directamente los tipos usando:

bash
1npm install @types/mdx
2# o
3yarn add @types/mdx
4# o
5pnpm add @types/mdx

Luego, actualiza tu tsconfig.json para incluir los tipos recién agregados:

json
1"types": [
2  "node",
3  "webpack-env",
4  "mdx"
5]

Este enfoque simplificado proporciona a TypeScript las declaraciones de tipos necesarias para los archivos MDX, facilitando la integración.

En el juego del desarrollo frontend, todos nos topamos con estos enredos. Pero aquí está la cosa, cada vez que solucionamos uno de estos rompecabezas, nos volvemos un poco más fuertes. Así que, aunque ahora estemos peleando con TypeScript y MDX, la próxima vez será algo diferente.

Estamos en esto juntos, ¡Ánimo y happy coding, colega! 🚀✨