fix: demo app

example/Doc.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import * as mdx from '../index';
 import docs from './docs';
@@ -14,7 +14,7 @@ const Doc = () => {
   const [name, doc] =
     fixture === 'edited' ? [fixture, searchParams.get('edit') || ''] : [docs[fixture].name, docs[fixture].doc];
 
-  const [Content, setContent] = useState(null);
+  const [Content, setContent] = useState<FunctionComponent>(null);
 
   useEffect(() => {
     const render = async () => {
@@ -23,7 +23,10 @@ const Doc = () => {
         safeMode,
       };
 
-      setContent(await mdx.run(String(mdx.compile(doc, opts))));
+      const code = mdx.compile(doc, opts);
+      const content = await mdx.run(code);
+
+      setContent(() => content);
     };
     render();
   }, [doc, lazyImages, safeMode]);
@@ -35,9 +38,7 @@ const Doc = () => {
           {!ci && <h2 className="rdmd-demo--markdown-header">{name}</h2>}
           <div id="content-container">
             <RenderError>
-              <div className="markdown-body">
-                <Content />
-              </div>
+              <div className="markdown-body">{Content && <Content />}</div>
             </RenderError>
           </div>
         </section>

example/docs.ts

@@ -1,17 +1,32 @@
+// @ts-ignore
 import calloutTests from '../docs/callout-tests.md';
+// @ts-ignore
 import callouts from '../docs/callouts.md';
+// @ts-ignore
 import codeBlockTests from '../docs/code-block-tests.md';
+// @ts-ignore
 import codeBlocks from '../docs/code-blocks.md';
+// @ts-ignore
 import embeds from '../docs/embeds.md';
+// @ts-ignore
 import features from '../docs/features.md';
+// @ts-ignore
 import gettingStarted from '../docs/getting-started.md';
+// @ts-ignore
 import headings from '../docs/headings.md';
+// @ts-ignore
 import images from '../docs/images.md';
+// @ts-ignore
 import lists from '../docs/lists.md';
+// @ts-ignore
 import sanitizingTests from '../docs/sanitizing-tests.md';
+// @ts-ignore
 import tableOfContentsTests from '../docs/table-of-contents-tests.md';
+// @ts-ignore
 import tablesTests from '../docs/tables-tests.md';
+// @ts-ignore
 import tables from '../docs/tables.md';
+// @ts-ignore
 import varsTest from '../docs/variable-tests.md';
 
 const lowerCase = (str: string) =>

webpack.common.js

@@ -59,14 +59,10 @@ module.exports = {
           },
         },
       },
-      {
-        test: /\.(txt|md)$/i,
-        type: 'asset/source',
-      },
     ],
   },
   resolve: {
-    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
+    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx', '.md'],
     fallback: { buffer: require.resolve('buffer') },
   },
 };

webpack.dev.js

@@ -21,15 +21,20 @@ const config = merge(common, {
     port: 9966,
     hot: true,
   },
+  module: {
+    rules: [
+      {
+        test: /\.(txt|md)$/i,
+        type: 'asset/source',
+      },
+    ],
+  },
   plugins: [
     new webpack.ProvidePlugin({
       process: 'process/browser',
     }),
   ],
   resolve: {
-    alias: {
-      'react-dom': '@hot-loader/react-dom',
-    },
     fallback: {
       fs: require.resolve('browserify-fs'),
       path: require.resolve('path-browserify'),