Nested Component imports via MDX aren't JSX transformed
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
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
- A minimalist reproduction can be found here
- 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
contentTypeasmdx. #180 - I also tried defining the cwd inside of
makeSourceas 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
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de contentlayerdev/contentlayer
-
Dificultad 3/5 1-2 días Aptitud para principiantes 25/100
contentlayerdev/contentlayer#506 · 84 comentarios · 47 reacciones ·
-
Poor/broken monorepo DX: can't specify .contentlayer/ output path, no docs for custom config path Abiertohelp wanted meta: never-stale needs-research
Dificultad 4/5 3-5 días Aptitud para principiantes 38/100
contentlayerdev/contentlayer#464 · 4 comentarios · 9 reacciones ·
-
State of the project Abiertometa: never-stale
Dificultad 5/5 Más de una semana Aptitud para principiantes 10/100
contentlayerdev/contentlayer#429 · 49 comentarios · 83 reacciones ·
-
meta: never-stale topic: markdown/mdx
Dificultad 4/5 3-5 días Aptitud para principiantes 42/100
contentlayerdev/contentlayer#421 · 4 reacciones ·
-
meta: never-stale needs-research topic: schema
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
contentlayerdev/contentlayer#420 ·
Todos los issues de contentlayerdev/contentlayer
Issues similares
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
-
Dificultad 1/5 Menos de una hora Aptitud para principiantes 85/100
-
Mend: dependency security vulnerability untriaged
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100