Nested Component imports via MDX aren't JSX transformed
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
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
- Linguagem predominante
- TypeScript
- Estrelas
- 3.5k
- Forks
- 192
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
Guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Mais de contentlayerdev/contentlayer
-
Dificuldade 3/5 1-2 dias Facilidade para iniciantes 25/100
contentlayerdev/contentlayer#506 · 84 comentários · 47 reações ·
-
Poor/broken monorepo DX: can't specify .contentlayer/ output path, no docs for custom config path Abertahelp wanted meta: never-stale needs-research
Dificuldade 4/5 3-5 dias Facilidade para iniciantes 38/100
contentlayerdev/contentlayer#464 · 4 comentários · 9 reações ·
-
State of the project Abertameta: never-stale
Dificuldade 5/5 Mais de uma semana Facilidade para iniciantes 10/100
contentlayerdev/contentlayer#429 · 49 comentários · 83 reações ·
-
meta: never-stale topic: markdown/mdx
Dificuldade 4/5 3-5 dias Facilidade para iniciantes 42/100
contentlayerdev/contentlayer#421 · 4 reações ·
-
meta: never-stale needs-research topic: schema
Dificuldade 5/5 Mais de uma semana Facilidade para iniciantes 25/100
contentlayerdev/contentlayer#420 ·
Todas as issues de contentlayerdev/contentlayer
Issues semelhantes
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 75/100
vercel-labs/just-bash#464 ·
-
looksLikeSlug() is ASCII-only, so non-Latin entity slugs (e.g. Korean) skip exact match and collapse Aberta
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 75/100
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 65/100
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 65/100
-
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 90/100
TanStack/tanstack.com#1293 ·