Running prettier via the pre-commit hook creates invalid mdx

[AlexanderZeilmann]

Describe the bug Running husky creates invalid mdx.

To Reproduce Steps to reproduce the behavior:

1. Standard setup
2. Create blog post containing Press <kbd><kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd></kbd> and
3. Blog post works fine.
4. Run husky by committing the blog post.
5. The code snippet above is converted to

Press <kbd>
    <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>
</kbd>
and

Which generates the following error

Error: Build failed with 1 error:
_mdx_bundler_entry_point-526e1ca1-0ac1-4cfd-bcc7-534cd64daa30.mdx:20:0: ERROR: [plugin: esbuild-xdm] Expected a closing tag for `</kbd>` (20:7-20:12) before the end of `paragraph`

Expected behavior Husky should not generate invalid mdx.

System Info (if dev / build issue):

• OS: Mac OS 10.15.4
• Node version: 16.9.1
• Npm version: 8.3.0

Additional context The problem appears also with other html tags. A workaround is to disable husky temporarily by renaming the .husky folder to something else. According to the mdx playground the markup is really invalid, i.e., it is not a problem with the mdx setup here. This is probably an upstream bug, but I wanted to report this here as well.

[timlrx]

Husky just runs lint-staged which runs prettier. Here's the line in package.json. Looks like prettier might not be that smart in formatting HTML in mdx. Try removing md|mdx and see if that works?

It could also be the case that the current prettier version is slightly outdated and maybe upgrading would fix the issue. Let me know if upgrading prettier helps?

[AlexanderZeilmann]

I created an upstream bug with prettier, until this is fixed I am keeping husky disabled.

[AlexanderZeilmann]

The bug is now tracked in https://github.com/prettier/prettier/issues/12209. I'm closing this issue until the bug is fixed as we can't do anything right now.

[timlrx]

Re-opening the issue for awareness and to avoid similar issues being posted. Have also changed the title to more accurately reflect the bug.

If you encounter the issue, currently the best approach would be to exclude md/mdx files from being linted by prettier. You can do that by removing md|mdx in this line in package.json