Merge pull request #907 from etn-ccis/bug/BLUI-6031-mdx-js-version-up…

…grade mdx-js version upgrade
etn-ccis · Sep 17, 2024 · 795b547 · 795b547
2 parents 1b4982f + c71b7f7
commit 795b547
Show file tree

Hide file tree

Showing 4 changed files with 4,804 additions and 4,963 deletions.
diff --git a/docs/craco.config.js b/docs/craco.config.js
@@ -1,23 +1,28 @@
 const { addAfterLoader, loaderByName } = require('@craco/craco');
+// const remarkGfm = require('remark-gfm');
 
-const remarkGfm = require('remark-gfm');
-
-module.exports = {
+module.exports = module.exports = async (env) => {
+    const remarkGfm = (await import('remark-gfm')).default
+return{
     webpack: {
         configure(webpackConfig) {
             addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
                 test: /\.mdx?$/,
-
-                loader: '@mdx-js/loader',
-
-                options: {
-                    providerImportSource: '@mdx-js/react',
-
-                    remarkPlugins: [remarkGfm],
-                },
+                use: [
+                    { loader: 'babel-loader', options: {} },
+                    {
+                        loader: '@mdx-js/loader',
+                        /** @type {Options} */
+                        options: {
+                            remarkPlugins: [remarkGfm],
+                        providerImportSource: '@mdx-js/react',   
+                        }
+                    }
+                ]
             });
 
             return webpackConfig;
         },
     },
+}
 };
diff --git a/docs/package.json b/docs/package.json
@@ -46,9 +46,9 @@
         "@emotion/styled": "^11.10.5",
         "@fontsource/roboto": "^4.5.8",
         "@fontsource/roboto-mono": "^5.0.17",
-        "@mdx-js/loader": "^2.2.1",
-        "@mdx-js/mdx": "^2.1.5",
-        "@mdx-js/react": "^2.1.5",
+        "@mdx-js/loader": "^3.0.1",
+        "@mdx-js/mdx": "^3.0.1",
+        "@mdx-js/react": "^3.0.1",
         "@mui/icons-material": "^5.15.0",
         "@mui/material": "^5.15.0",
         "@reduxjs/toolkit": "^1.8.2",
@@ -82,7 +82,7 @@
         "@types/lodash.debounce": "^4.0.7",
         "@types/mdx": "^2.0.2",
         "@types/node": "^18.15.11",
-        "@types/react": "^18.0.25",
+        "@types/react": "^18.3.6",
         "@types/react-dom": "^18.2.17",
         "@types/react-router-dom": "^5.3.3",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -96,7 +96,7 @@
         "path": "^0.12.7",
         "prettier": "^2.7.1",
         "react-device-detect": "^2.2.2",
-        "remark-gfm": "^1.0.0",
+        "remark-gfm": "^4.0.0",
         "typescript": "^4.8.4",
         "webpack": "^5.94.0",
         "webpack-cli": "^4.10.0",

diff --git a/docs/src/index.tsx b/docs/src/index.tsx
@@ -37,7 +37,19 @@ import { ScrollToTop } from './router/ScrollToTop';
 if (process.env.REACT_APP_GAID) {
     ReactGA.initialize(process.env.REACT_APP_GAID);
 }
-
+// TODO: Remove this after the issues with @types/react goes away
+// https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/68444
+/* eslint-disable */
+declare global {
+    namespace React {
+        interface DOMAttributes<T> {
+            placeholder?: string | undefined;
+            onPointerEnterCapture?: string | undefined;
+            onPointerLeaveCapture?: string | undefined;
+        }
+    }
+}
+/* eslint-enable */
 // Brightlayer UI Icon font
 require('@brightlayer-ui/icons/BrightlayerUIIcons.css');
 const container = document.getElementById('root');