Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Nested Component imports via MDX aren't JSX transformed

Abierto
#309 6 comentarios 4 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
next.js, react, typescript
Área
build-system

Línea de trabajo

Comienza con src/hooks/useMDXComponent.ts en las líneas mostradas en el stack trace y, a continuación, reproduce el fallo usando el proyecto Contentlayer-Repro enlazado. Compara la salida transformada de un componente independiente y de otro con imports anidados, y usa pages/posts/[slug].tsx como punto de entrada del renderizado. Se considera completado cuando los componentes importados con sus propios imports se renderizan sin el error Unexpected token.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

blocked-upstream help wanted meta: never-stale topic: markdown/mdx

I'm running into problems when trying to import components inside a .mdx file, and more specifically when the imported component also imports other components. What I want to be able to do

// first-post.mdx

// ideally, I would like to be able to do this
import TestComponent from "components/TestComponent";

// this currently works unless this component imports another component
import TestComponent from "./components/TestComponent";

<TestComponent />

Importing the component by starting with the base path works as long as it is a standalone component and does not import another component. If that component does include an import statement, I get the following error:

error - SyntaxError: Unexpected token '<'
    at new Function (<anonymous>)
    at getMDXComponent (file:///Users/andy/Documents/Dev/2022/webby/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:18:14)
    at file:///Users/andy/Documents/Dev/2022/webby/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:23:30
    at Object.useMemo (/Users/andy/Documents/Dev/2022/webby/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5124:19)
    at Object.useMemo (/Users/andy/Documents/Dev/2022/webby/node_modules/react/cjs/react.development.js:1650:21)
    at useMDXComponent (file:///Users/andy/Documents/Dev/2022/webby/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:23:16)
    at SinglePostPage (webpack-internal:///./pages/posts/[slug].tsx:42:96)
    at renderWithHooks (/Users/andy/Documents/Dev/2022/webby/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/andy/Documents/Dev/2022/webby/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/andy/Documents/Dev/2022/webby/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) {
  page: '/posts/[slug]'

The weird thing is, I'm having this issue on a project that I just spun up this morning, but not on a project that was created several months ago, even though they are using the same version of Next and ContentLayer. This could mean that it's user error, but I've looked in detail at the setup/configs for both projects and cannot find the issue.

Repro

  • The other project that I mentioned earlier that seems to be working correctly can be found here
  • Specifically, you can see it working in this post, which is importing this component
  • Like I mentioned, I'm not able to find a meaningful difference in the structure/configs of the two projects
Attempted Solutions:
  • I'm getting the same error as mentioned in this issue. However, I have double checked, and I am defining the contentType as mdx. #180
  • I also tried defining the cwd inside of makeSource as described here, but that did not resolve the issue. #302
Lenguaje dominante
TypeScript
Estrellas
3.5k
Forks
192
Métricas de merge de PR
Sin PR fusionados en 30 d

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de contentlayerdev/contentlayer

Todos los issues de contentlayerdev/contentlayer

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.