Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Nested Component imports via MDX aren't JSX transformed

Aberta
#309 6 comentários 4 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
next.js, react, typescript
Domínio
build-system

Direção de pesquisa

Comece com src/hooks/useMDXComponent.ts nas linhas mostradas no stack trace e, em seguida, reproduza a falha usando o projeto Contentlayer-Repro vinculado. Compare a saída transformada de um componente independente e de um componente com imports aninhados, e use pages/posts/[slug].tsx como ponto de entrada da renderização. A tarefa estará concluída quando os componentes importados com seus próprios imports forem renderizados sem o erro Unexpected token.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
TypeScript
Estrelas
3.5k
Forks
192
Métricas de merge de PRs
Nenhum PR com merge em 30d

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de contentlayerdev/contentlayer

Todas as issues de contentlayerdev/contentlayer

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.