remark-lint-mdx-jsx-self-close

1.0.1 verified Fri May 01 auth: no javascript

A remark-lint rule that warns when closing tags are used for empty MDX JSX elements, enforcing self-closing syntax where possible. Current stable version is 1.0.1, released as part of the remark-lint monorepo. ESM-only, requires Node.js 16+. Ships TypeScript types. Part of the unified/remark ecosystem for linting Markdown and MDX files. Differentiates from general JSX linting by focusing specifically on MDX syntax and leveraging remark's AST.

Common errors

error Cannot find module 'remark-lint-mdx-jsx-self-close' ↓

cause Package not installed or CommonJS require used while package is ESM-only.

fix

npm install remark-lint-mdx-jsx-self-close and use import instead of require.

error Error [ERR_REQUIRE_ESM]: require() of ES Module ↓

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

fix

Convert to import or use dynamic import().

error TypeError: remarkLintMdxJsxSelfClose is not a function ↓

cause Named import instead of default import.

fix

Use import remarkLintMdxJsxSelfClose from 'remark-lint-mdx-jsx-self-close'

Warnings

breaking Package is ESM-only starting from v1.0.0; CommonJS require() will fail. ↓

fix Use import syntax or dynamic import(). For Node.js <16, upgrade or use an ESM-compatible runtime.

gotcha The rule does not check for void elements (e.g., <br>, <img>); those are MDX-specific and may still need explicit self-closing. ↓

fix Use an additional rule like remark-lint-no-html-void-element or MDX-specific linting for void elements.

gotcha The rule only applies to JSX elements in MDX, not to HTML-like elements or custom components. ↓

fix Ensure your files are parsed as MDX (with remark-mdx) for the rule to work correctly.

deprecated None

Install

npm install remark-lint-mdx-jsx-self-close

yarn add remark-lint-mdx-jsx-self-close

pnpm add remark-lint-mdx-jsx-self-close

Imports

remarkLintMdxJsxSelfClose

wrong

const remarkLintMdxJsxSelfClose = require('remark-lint-mdx-jsx-self-close')

correct

import remarkLintMdxJsxSelfClose from 'remark-lint-mdx-jsx-self-close'

This package is ESM-only since v1.0.0; CommonJS require is not supported.

default export

wrong

import { remarkLintMdxJsxSelfClose } from 'remark-lint-mdx-jsx-self-close'

correct

import remarkLintMdxJsxSelfClose from 'remark-lint-mdx-jsx-self-close'

The package exports a single default function, not a named export. Named import will result in undefined.

TypeScript types
```
import type { Plugin } from 'unified'
```
Types are bundled with the package; you can use `import remarkLintMdxJsxSelfClose from 'remark-lint-mdx-jsx-self-close'` with TypeScript and it will infer the type.

Quickstart

Demonstrates how to use the rule with the unified pipeline to lint MDX JSX self-closing tags.

import remarkLint from 'remark-lint'
import remarkLintMdxJsxSelfClose from 'remark-lint-mdx-jsx-self-close'
import remarkParse from 'remark-parse'
import remarkStringify from 'remark-stringify'
import { unified } from 'unified'
import { reporter } from 'vfile-reporter'

const file = await unified()
  .use(remarkParse)
  .use(remarkLint)
  .use(remarkLintMdxJsxSelfClose)
  .use(remarkStringify)
  .process('<a href="https://example.com"></a>')

console.error(reporter(file))