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

[Saeris]

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 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.
2. 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:

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.

[schickling]

Thanks a lot for opening this issue and providing a minimal reproduction - very helpful!

I can confirm that component HMR (as well as cache invalidation) indeed doesn't work when importing components from MDX files directly. However (at least as a workaround for now), it does already work as expected in case you're importing the used React components like in the screenshot below:

[schickling]

This is closely related to #247

[Svish]

Is HMR "supposed" to work at all? For me it doesn't seem to work properly for regular mdx-files either, no components or imports, just regular markdown with frontmatter and some plain html elements. 🤔

It does pick up on new files I add, but when I change existing files, I can't see the changes no matter how hard I reload the browser. I have to shutdown the nextjs dev server and restart it, then the change appears on the next refresh. 🤷‍♂️

I'm on Windows, if that's related. I get a "Warning: Contentlayer might not work as expected on Windows" in my console, but don't know what "expected" is related to here...

[city17]

@Svish When using imported components in MDX files I've found that it only refreshes after re-saving the MDX file itself.

[Svish]

@city17 It's the MDX file itself I'm editing, and it doesn't even use any imported components at all.