search

timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
8.79k stars 2.05k forks source link

Running prettier via the pre-commit hook creates invalid mdx #369

Open AlexanderZeilmann opened 2 years ago

AlexanderZeilmann commented 2 years ago

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):

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 commented 2 years ago

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 commented 2 years ago

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

AlexanderZeilmann commented 2 years ago

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 commented 2 years ago

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