diff --git a/components/Table/index.tsx b/components/Table/index.tsx
index cacfe0ef1..e8e80b9fc 100644
--- a/components/Table/index.tsx
+++ b/components/Table/index.tsx
@@ -1,15 +1,43 @@
 import React from 'react';
 
 interface Props extends JSX.IntrinsicAttributes {
+  align?: ('left' | 'center' | 'right')[];
   children: [React.ReactElement<HTMLTableCaptionElement | HTMLTableSectionElement | HTMLTableRowElement>];
+  rows?: [[any]];
 }
 
+const TableContent = ({ rows, align = [] }: Omit<Props, 'children'>) => {
+  const [head, ...body] = rows;
+
+  return (
+    <>
+      <thead>
+        <tr>
+          {head.map((cell, index) => (
+            <th style={{ textAlign: align[index] || 'center' }}>{cell}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {body.map(row => (
+          <tr>
+            {row.map((cell, index) => (
+              <td style={{ textAlign: align[index] || 'center' }}>{cell}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </>
+  );
+};
+
 const Table = (props: Props) => {
-  const { children } = props;
+  const { children, ...rest } = props;
+
   return (
     <div className="rdmd-table">
       <div className="rdmd-table-inner">
-        <table>{children}</table>
+        <table>{rest.rows ? <TableContent {...rest} /> : children}</table>
       </div>
     </div>
   );
diff --git a/docs/mdx-components.mdx b/docs/mdx-components.mdx
new file mode 100644
index 000000000..26b759bbc
--- /dev/null
+++ b/docs/mdx-components.mdx
@@ -0,0 +1,23 @@
+## Tables
+
+If you have some tabular data, it may be easier to write it with mdx:
+
+```jsx MDX
+export const table = [
+  ['Left', 'Center', 'Right'],
+  ['L0', '**bold**', '$1600'],
+  ['L1', '`code`', '$12'],
+  ['L2', '_italic_', '$1'],
+];
+
+<Table align={['left', 'center', 'right']} rows={table} />;
+```
+
+export const table = [
+  ['Left', 'Center', 'Right'],
+  ['L0', '**bold**', '$1600'],
+  ['L1', '`code`', '$12'],
+  ['L2', '_italic_', '$1'],
+];
+
+<Table align={['left', 'center', 'right']} rows={table} />
diff --git a/docs/tables.md b/docs/tables.md
index b34d7d73b..b19f77361 100644
--- a/docs/tables.md
+++ b/docs/tables.md
@@ -1,8 +1,9 @@
 ---
-title: "Tables"
+title: 'Tables'
 category: 5fdf7610134322007389a6ed
 hidden: false
 ---
+
 ## Syntax
 
     | Left |  Center  | Right |
@@ -20,7 +21,7 @@ hidden: false
 This example also shows off custom theming!
 
 | Left |  Center  | Right |
-|:-----|:--------:|------:|
+| :--- | :------: | ----: |
 | L0   | **bold** | $1600 |
 | L1   |  `code`  |   $12 |
 | L2   | _italic_ |    $1 |
@@ -35,25 +36,32 @@ Tables have been simplified to mirror a more standard implementation. We've also
   --table-head: #5b1c9f;
   --table-head-text: white;
   --table-stripe: #f0eaf7;
-  --table-edges: rgba(34, 5, 64, .5);
+  --table-edges: rgba(34, 5, 64, 0.5);
   --table-row: white;
 }
 ```
+
 ```scss CSS Selectors
 /* Table
  */
-.markdown-body .rdmd-table table {}
+.markdown-body .rdmd-table table {
+}
 
 /* Rows
  */
-.markdown-body .rdmd-table tr {}
-.markdown-body .rdmd-table thead tr {} /* header row's background */
-.markdown-body .rdmd-table tr:nth-child(2n) {} /* striped rows' background */
+.markdown-body .rdmd-table tr {
+}
+.markdown-body .rdmd-table thead tr {
+} /* header row's background */
+.markdown-body .rdmd-table tr:nth-child(2n) {
+} /* striped rows' background */
 
 /* Cells
  */
-.markdown-body .rdmd-table th {}
-.markdown-body .rdmd-table td {}
+.markdown-body .rdmd-table th {
+}
+.markdown-body .rdmd-table td {
+}
 ```
 
 <style>
diff --git a/errors/mdx-syntax-error.ts b/errors/mdx-syntax-error.ts
new file mode 100644
index 000000000..aecd1372a
--- /dev/null
+++ b/errors/mdx-syntax-error.ts
@@ -0,0 +1,26 @@
+import { VFileMessage } from 'vfile-message';
+
+export default class MdxSyntaxError extends SyntaxError {
+  original = '';
+
+  constructor(error: VFileMessage, doc: string) {
+    const { message, line, column, url } = error;
+
+    const messages = [
+      `Uh oh! We ran into a syntax error at { line: ${line}, column: ${column} }, please see this url for more details: ${url}`,
+    ];
+
+    if (typeof line !== 'undefined') {
+      messages.push(doc.split('\n')[line - 1]);
+
+      if (typeof column !== 'undefined') {
+        const prefix = new Array(column).map(() => '').join(' ');
+        messages.push(`${prefix}↑ ${message}`);
+      }
+    }
+
+    super(messages.join('\n'));
+
+    this.original = error;
+  }
+}
diff --git a/example/Doc.tsx b/example/Doc.tsx
index 8489400b6..cfc6504c0 100644
--- a/example/Doc.tsx
+++ b/example/Doc.tsx
@@ -15,6 +15,7 @@ const Doc = () => {
     fixture === 'edited' ? [fixture, searchParams.get('edit') || ''] : [docs[fixture].name, docs[fixture].doc];
 
   const [Content, setContent] = useState<FunctionComponent>(null);
+  const [error, setError] = useState<string>(null);
 
   useEffect(() => {
     const render = async () => {
@@ -23,10 +24,15 @@ const Doc = () => {
         safeMode,
       };
 
-      const code = mdx.compile(doc, opts);
-      const content = await mdx.run(code);
+      try {
+        const code = mdx.compile(doc, opts);
+        const content = await mdx.run(code);
 
-      setContent(() => content);
+        setError(() => null);
+        setContent(() => content);
+      } catch (e) {
+        setError(() => e.message);
+      }
     };
 
     render();
@@ -38,7 +44,7 @@ const Doc = () => {
         <section id="hub-content">
           {!ci && <h2 className="rdmd-demo--markdown-header">{name}</h2>}
           <div id="content-container">
-            <RenderError>
+            <RenderError error={error}>
               <div className="markdown-body">{Content && <Content />}</div>
             </RenderError>
           </div>
diff --git a/example/RenderError.tsx b/example/RenderError.tsx
index 55536adda..dff61cae2 100644
--- a/example/RenderError.tsx
+++ b/example/RenderError.tsx
@@ -1,6 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 
-interface Props {}
+interface Props {
+  error?: string;
+}
 
 interface State {
   hasError: boolean;
@@ -19,13 +21,13 @@ class RenderError extends React.Component<PropsWithChildren<Props>, State> {
   }
 
   render() {
-    const { children } = this.props;
+    const { children, error } = this.props;
     const { hasError, message } = this.state;
 
-    return hasError ? (
+    return hasError || error ? (
       <div className="error">
         <pre>
-          <code>{message}</code>
+          <code>{message || error}</code>
         </pre>
       </div>
     ) : (
diff --git a/example/docs.ts b/example/docs.ts
index 2eba3b255..8a5e257d9 100644
--- a/example/docs.ts
+++ b/example/docs.ts
@@ -19,6 +19,8 @@ import images from '../docs/images.md';
 // @ts-ignore
 import lists from '../docs/lists.md';
 // @ts-ignore
+import mdxComponents from '../docs/mdx-components.mdx';
+// @ts-ignore
 import sanitizingTests from '../docs/sanitizing-tests.md';
 // @ts-ignore
 import tableOfContentsTests from '../docs/table-of-contents-tests.md';
@@ -43,6 +45,7 @@ const fixtures = Object.entries({
   headings,
   images,
   lists,
+  mdxComponents,
   sanitizingTests,
   tableOfContentsTests,
   tables,
diff --git a/index.tsx b/index.tsx
index 5986efd61..4bb41046e 100644
--- a/index.tsx
+++ b/index.tsx
@@ -13,11 +13,11 @@ import { getHref } from './components/Anchor';
 import BaseUrlContext from './contexts/BaseUrl';
 import { options } from './options';
 
-require('./styles/main.scss');
+import transformers from './processor/transform';
+import compilers from './processor/compile';
+import MdxSyntaxError from './errors/mdx-syntax-error';
 
-import calloutTransformer from './processor/transform/callouts';
-import gemojiTransformer from './processor/transform/gemoji+';
-import gemojiCompiler from './processor/compile/gemoji';
+require('./styles/main.scss');
 
 const unimplemented = debug('mdx:unimplemented');
 
@@ -46,21 +46,25 @@ const makeUseMDXComponents = (more: RunOpts['components']) => {
   return () => components;
 };
 
-const remarkPlugins = [remarkFrontmatter, calloutTransformer, gemojiTransformer];
+const remarkPlugins = [remarkFrontmatter, ...transformers];
 
 export const reactProcessor = (opts = {}) => {
   return createProcessor({ remarkPlugins, ...opts });
 };
 
 export const compile = (text: string, opts = {}) => {
-  return String(
-    compileSync(text, {
-      outputFormat: 'function-body',
-      providerImportSource: '#',
-      remarkPlugins,
-      ...opts,
-    }),
-  ).replace(/await import\(_resolveDynamicMdxSpecifier\('react'\)\)/, 'arguments[0].imports.React');
+  try {
+    return String(
+      compileSync(text, {
+        outputFormat: 'function-body',
+        providerImportSource: '#',
+        remarkPlugins,
+        ...opts,
+      }),
+    ).replace(/await import\(_resolveDynamicMdxSpecifier\('react'\)\)/, 'arguments[0].imports.React');
+  } catch (error) {
+    throw new MdxSyntaxError(error, text);
+  }
 };
 
 export const run = async (code: string, _opts: RunOpts = {}) => {
@@ -86,7 +90,7 @@ export const reactTOC = (text: string, opts = {}) => {
 export const mdx = (tree: any, opts = {}) => {
   return remark()
     .use(remarkMdx)
-    .data({ toMarkdownExtensions: [{ extensions: [gemojiCompiler] }] })
+    .data({ toMarkdownExtensions: [{ extensions: compilers }] })
     .stringify(tree, opts);
 };
 
diff --git a/package-lock.json b/package-lock.json
index fdbaff2e7..4b3c1cb32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,10 +31,12 @@
         "remark-mdx": "^3.0.0",
         "remark-parse": "^11.0.0",
         "remark-stringify": "^11.0.0",
+        "source-map": "^0.7.4",
         "trim": "^1.0.1",
         "unified": "^8.4.0",
         "unist-util-flatmap": "^1.0.0",
-        "unist-util-visit": "^4.1.1"
+        "unist-util-visit": "^4.1.1",
+        "util": "^0.12.5"
       },
       "devDependencies": {
         "@babel/core": "^7.21.4",
@@ -8364,7 +8366,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
       "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-      "dev": true,
       "dependencies": {
         "possible-typed-array-names": "^1.0.0"
       },
@@ -9013,7 +9014,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -10431,7 +10431,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -10997,7 +10996,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.4"
       },
@@ -11009,7 +11007,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -13252,7 +13249,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.3"
       }
@@ -13384,7 +13380,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -13520,7 +13515,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -13881,7 +13875,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -14133,7 +14126,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -14145,7 +14137,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -14157,7 +14148,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -14169,7 +14159,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.3"
       },
@@ -14190,7 +14179,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -14784,8 +14772,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -14900,7 +14887,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
       "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -15029,7 +15015,6 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -15145,7 +15130,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
       "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -15389,7 +15373,6 @@
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
       "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
-      "dev": true,
       "dependencies": {
         "which-typed-array": "^1.1.14"
       },
@@ -24366,7 +24349,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
       "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -26720,7 +26702,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -28982,6 +28963,18 @@
       "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-8.0.2.tgz",
       "integrity": "sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ=="
     },
+    "node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -29843,7 +29836,6 @@
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
       "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
-      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
         "call-bind": "^1.0.7",
diff --git a/package.json b/package.json
index e39364c94..228e60d45 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,8 @@
     "trim": "^1.0.1",
     "unified": "^8.4.0",
     "unist-util-flatmap": "^1.0.0",
-    "unist-util-visit": "^4.1.1"
+    "unist-util-visit": "^4.1.1",
+    "util": "^0.12.5"
   },
   "peerDependencies": {
     "@mdx-js/react": "^3.0.0",
diff --git a/webpack.common.js b/webpack.common.js
index f88f618a8..d399d6e11 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -63,6 +63,6 @@ module.exports = {
   },
   resolve: {
     extensions: ['.js', '.json', '.jsx', '.ts', '.tsx', '.md'],
-    fallback: { buffer: require.resolve('buffer') },
+    fallback: { buffer: require.resolve('buffer'), util: require.resolve('util/') },
   },
 };
diff --git a/webpack.dev.js b/webpack.dev.js
index c6f45c0f2..c026856b6 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -24,7 +24,7 @@ const config = merge(common, {
   module: {
     rules: [
       {
-        test: /\.(txt|md)$/i,
+        test: /\.(txt|mdx?)$/i,
         type: 'asset/source',
       },
     ],