mdx.js options

package-lock.json

@@ -27,6 +27,7 @@
         "@babel/preset-react": "^7.28.5",
         "@babel/preset-typescript": "^7.28.5",
         "@mdx-js/loader": "^3.1.1",
+        "@mdx-js/react": "^3.1.1",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
         "@svgr/webpack": "^8.1.0",
         "@testing-library/dom": "^10.4.1",
@@ -2826,6 +2827,24 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@mdx-js/react": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
+      "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdx": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16",
+        "react": ">=16"
+      }
+    },
     "node_modules/@noble/hashes": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",

package.json

@@ -39,6 +39,7 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^10.4.1",

webpack.config.ts

@@ -6,7 +6,7 @@ import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 import {WebpackManifestPlugin} from "webpack-manifest-plugin";
 import TerserPlugin from "terser-webpack-plugin";
-import {Options} from '@mdx-js/loader';
+import {Options as MDXOptions} from '@mdx-js/loader';
 import "webpack-dev-server";
 
 const isProduction = process.env.NODE_ENV === "production";
@@ -107,8 +107,9 @@ const config: webpack.Configuration = {
                 }
               }, {
                 loader: "@mdx-js/loader",
-                options: <Options> {
-
+                options: <MDXOptions> {
+                  outputFormat: "program",
+                  providerImportSource: "@mdx-js/react",
                 }
               }
             ],