{"id":26235,"library":"remark-lint-mdx-jsx-no-void-children","title":"remark-lint-mdx-jsx-no-void-children","description":"remark-lint rule to warn when void HTML elements (such as `<br>`, `<hr>`, `<img>`) in MDX JSX have children (either JSX children or props like `children` or `dangerouslySetInnerHTML`). Current stable version is 1.0.1, part of the remark-lint ecosystem. It assumes standard HTML void element semantics and React-like prop conventions. This rule is ESM-only and requires Node.js 16+. Unlike generic JSX linting, it is specifically tailored for MDX files processed by remark.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/remarkjs/remark-lint#main","tags":["javascript","children","closing","empty","jsx","lint","mdx","remark","remark-lint","typescript"],"install":[{"cmd":"npm install remark-lint-mdx-jsx-no-void-children","lang":"bash","label":"npm"},{"cmd":"yarn add remark-lint-mdx-jsx-no-void-children","lang":"bash","label":"yarn"},{"cmd":"pnpm add remark-lint-mdx-jsx-no-void-children","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the unified ecosystem; remark-lint plugins require unified to work.","package":"unified","optional":false},{"reason":"This plugin is a rule for remark-lint; it must be used together with remark-lint.","package":"remark-lint","optional":false},{"reason":"Required to parse MDX files; the rule is designed for MDX syntax.","package":"remark-mdx","optional":true}],"imports":[{"note":"Package is ESM-only; CommonJS require() will fail.","wrong":"const remarkLintMdxJsxNoVoidChildren = require('remark-lint-mdx-jsx-no-void-children')","symbol":"default (remarkLintMdxJsxNoVoidChildren)","correct":"import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'"},{"note":"This package exports no named exports; the default export is the function. Named import will result in undefined.","wrong":"import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'","symbol":"remarkLintMdxJsxNoVoidChildren (named)","correct":"import { remarkLintMdxJsxNoVoidChildren } from 'remark-lint-mdx-jsx-no-void-children'"},{"note":"Package includes TypeScript types; no separate type import needed.","wrong":"import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'","symbol":"TypeScript usage","correct":"import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'"}],"quickstart":{"code":"import { unified } from 'unified'\nimport remarkParse from 'remark-parse'\nimport remarkStringify from 'remark-stringify'\nimport remarkLint from 'remark-lint'\nimport remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'\nimport { read } from 'to-vfile'\nimport { reporter } from 'vfile-reporter'\n\nconst file = await read('example.mdx')\n\nawait unified()\n  .use(remarkParse)\n  .use(remarkLint)\n  .use(remarkLintMdxJsxNoVoidChildren)\n  .use(remarkStringify)\n  .process(file)\n\nconsole.error(reporter(file))","lang":"typescript","description":"Shows how to configure the remark-lint rule with unified to lint an MDX file for void elements with children."},"warnings":[{"fix":"Use import syntax or dynamic import().","message":"ESM-only package: CommonJS require() will fail with ERR_REQUIRE_ESM.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure remark-mdx is added to the unified pipeline before this rule.","message":"This rule only works when used with remark-mdx to parse MDX syntax; without it, the rule may not detect JSX.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Configure the rule's assumptions or use a custom rule if needed.","message":"The rule assumes React semantics for 'children' and 'dangerouslySetInnerHTML' props; if you use a different JSX runtime that treats these differently, the rule may produce false positives.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run: npm install remark-lint-mdx-jsx-no-void-children","cause":"Package not installed or not in node_modules.","error":"Cannot find module 'remark-lint-mdx-jsx-no-void-children'"},{"fix":"Switch to import syntax or use dynamic import().","cause":"Using CommonJS require() to import an ESM-only package.","error":"ERR_REQUIRE_ESM"},{"fix":"Use: import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'","cause":"Incorrect import style, e.g., named import instead of default import.","error":"TypeError: remarkLintMdxJsxNoVoidChildren is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}