remark-lint-mdx-jsx-no-void-children

1.0.1 verified Fri May 01 auth: no javascript

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.

Common errors

error Cannot find module 'remark-lint-mdx-jsx-no-void-children' ↓

cause Package not installed or not in node_modules.

fix

Run: npm install remark-lint-mdx-jsx-no-void-children

error ERR_REQUIRE_ESM ↓

cause Using CommonJS require() to import an ESM-only package.

fix

Switch to import syntax or use dynamic import().

error TypeError: remarkLintMdxJsxNoVoidChildren is not a function ↓

cause Incorrect import style, e.g., named import instead of default import.

fix

Use: import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'

Warnings

breaking ESM-only package: CommonJS require() will fail with ERR_REQUIRE_ESM. ↓

fix Use import syntax or dynamic import().

gotcha This rule only works when used with remark-mdx to parse MDX syntax; without it, the rule may not detect JSX. ↓

fix Ensure remark-mdx is added to the unified pipeline before this rule.

gotcha 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. ↓

fix Configure the rule's assumptions or use a custom rule if needed.

Install

npm install remark-lint-mdx-jsx-no-void-children

yarn add remark-lint-mdx-jsx-no-void-children

pnpm add remark-lint-mdx-jsx-no-void-children

Imports

default (remarkLintMdxJsxNoVoidChildren)

wrong

const remarkLintMdxJsxNoVoidChildren = require('remark-lint-mdx-jsx-no-void-children')

correct

import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'

Package is ESM-only; CommonJS require() will fail.

remarkLintMdxJsxNoVoidChildren (named)

wrong

import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'

correct

import { remarkLintMdxJsxNoVoidChildren } from 'remark-lint-mdx-jsx-no-void-children'

This package exports no named exports; the default export is the function. Named import will result in undefined.

TypeScript usage

wrong

import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'

correct

import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'

Package includes TypeScript types; no separate type import needed.

Quickstart

Shows how to configure the remark-lint rule with unified to lint an MDX file for void elements with children.

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkStringify from 'remark-stringify'
import remarkLint from 'remark-lint'
import remarkLintMdxJsxNoVoidChildren from 'remark-lint-mdx-jsx-no-void-children'
import { read } from 'to-vfile'
import { reporter } from 'vfile-reporter'

const file = await read('example.mdx')

await unified()
  .use(remarkParse)
  .use(remarkLint)
  .use(remarkLintMdxJsxNoVoidChildren)
  .use(remarkStringify)
  .process(file)

console.error(reporter(file))