contentlayerdev / contentlayerdev/contentlayer

No HMR support and cached content being served for MDX files with imported components

Offen
#261 6 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug pkg/source-files topic: markdown/mdx
Vorherrschende Sprache
TypeScript
Sterne
3.5k
Forks
192
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

Put together an example here: https://github.com/Saeris/contentlayer-mdx-example

Two things I've observed when trying to import and use components within MDX documents:

1. When an imported component has changes, those changes go undetected, meaning HMR is broken for specifically those components. In the linked example, if you run `yarn dev` then go to [`src/components/ExampleComponent.tsx`](https://github.com/Saeris/contentlayer-mdx-example/blob/621b0b299919f40e70d97459dd849658758b4702/src/components/ExampleComponent.tsx#L18) and uncomment line 18, this should cause a reload because the component has been changed. I used inline styles here to make it easy to inspect the HTML to confirm the embedded component doesn't update.
1. Even after restarting the server, Contentlayer is unable to detect that `posts/mdx-component-example.mdx` has any changes (technically this is true, the content of this file is unchanged), so it serves the previously compiled version from the cache. You have to manually purge the cache and generated files in order for any changes to imported components to be reflected in the app.

Effectively this makes authoring mdx content quite a chore and is far from intuitive.

Additionally, if you want to import components that themselves have dependencies (in `ExampleComponent`, I'm importing `Button`), you can't set `"target": "es5",` inside of `tsconfig.json` such as in the official nextjs example, as you'll get a compilation error:

```bash
X [ERROR] Transforming const to the configured target environment ("es5") is not supported yet

../components/Button.tsx:4:7:
4 │ export const Button: FC<{
╵ ~~~~~

The target environment was set to "es5" here:

../tsconfig.json:3:14:
3 │ "target": "es5",
╵ ~~~~~

X [ERROR] Transforming destructuring to the configured target environment ("es5") is not supported yet

../components/Button.tsx:7:6:
7 │ }> = ({ children, onClick }) => (
╵ ^

The target environment was set to "es5" here:

../tsconfig.json:3:14:
3 │ "target": "es5",
╵ ~~~~~

Error: Found 1 problems in 1 documents.

└── Encountered unexpected errors while processing of 1 documents. This is possibly a bug in Contentlayer. Please open an issue.

• "mdx-component-example.mdx": UnexpectedMDXError: Error: Build failed with 2 errors:
../src/components/Button.tsx:4:7: ERROR: Transforming const to the configured target environment ("es5") is not supported yet
../src/components/Button.tsx:7:6: ERROR: Transforming destructuring to the configured target environment ("es5") is not supported yet

SourceFetchDataError: {
"_tag": "HandledFetchDataError"
}
```

It would be very helpful if there was an official example of how to use custom components in MDX with Contentlayer. Right now there is little if anything to go off of in the documentation.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere das Problem im verlinkten contentlayer-mdx-example mit `yarn dev`, indem du `src/components/ExampleComponent.tsx` und `posts/mdx-component-example.mdx` änderst; prüfe außerdem den ES5-Fall in `tsconfig.json` und die gemeldeten Fehler in `Button.tsx`. Erledigt ist die Aufgabe, wenn Änderungen an importierten Komponenten HMR auslösen, ein Neustart keine veralteten kompilierten MDX-Inhalte ausliefert und das dokumentierte Beispiel mit dem vorgesehenen TypeScript-Ziel funktioniert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
nextjs, typescript
Bereich
build-system, developer-experience, documentation
Issue-Typ
Bug
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.