{"library":"mdx-loader","title":"mdx-loader","description":"A batteries-included webpack loader for converting Markdown files into React components using MDX. Version 3.0.2 (latest) builds on mdx-js/mdx to provide emoji support (remark-emoji), automatic image embedding (remark-images), heading IDs (remark-slug), Prism.js syntax highlighting (rehype-prism), front matter export (gray-matter), table of contents (mdx-table-of-contents), and typographic improvements (remark-textr). Released as part of the mdx-util monorepo, it offers a zero-config experience for Webpack projects and can also be used inline with create-react-app via webpack loader syntax. Releases are infrequent; the loader uses MDX v1 and has not been updated for MDX v2, which is a breaking change. Key differentiator: all-in-one setup without needing separate remark/rehype plugins.","language":"javascript","status":"maintenance","last_verified":"Sat Apr 25","install":{"commands":["npm install mdx-loader"],"cli":null},"imports":["import Component from './doc.mdx'","import { frontMatter } from './doc.mdx'","import { tableOfContents } from './doc.mdx'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.mdx?$/,\n        use: ['babel-loader', 'mdx-loader']\n      }\n    ]\n  }\n};\n\n// Component.js\nimport React from 'react';\nimport Doc, { frontMatter, tableOfContents } from './doc.mdx';\n\nexport default function MyPage() {\n  return (\n    <div>\n      <h1>{frontMatter.title}</h1>\n      <Doc />\n      <pre>{JSON.stringify(tableOfContents, null, 2)}</pre>\n    </div>\n  );\n}","lang":"javascript","description":"Webpack configuration to process .mdx files with mdx-loader and babel-loader, and a React component importing the MDX document, its front matter, and table of contents.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}