fix:react 17 报错问题 (#216)

package.json

@@ -55,8 +55,8 @@
     "@types/react": "~18.0.5",
     "@types/react-dom": "~18.0.1",
     "@types/react-test-renderer": "~18.0.0",
-    "@uiw/react-github-corners": "~1.5.14",
-    "@uiw/react-markdown-preview": "~4.0.6",
+    "@uiw/react-github-corners": "~1.5.3",
+    "@uiw/react-markdown-preview": "~3.5.1",
     "@uiw/reset.css": "~1.0.6",
     "@wcj/dark-mode": "^1.0.14",
     "compile-less-cli": "~1.8.11",
@@ -102,4 +102,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/index.less

@@ -30,7 +30,7 @@
   border-radius: 3px;
   margin-bottom: 16px;
   background-color: var(--color-code-preview-bg) !important;
-  color: transparent !important;
+  // color: transparent !important;
   max-height: 420px;
   min-height: 12px;
   z-index: 10;

src/useCodePreview.ts

@@ -1,10 +1,19 @@
 import React, { useEffect, useRef } from 'react';
-// @ts-ignore
-import ReactDOMClient from 'react-dom/client';
-import ReactDOM from 'react-dom';
 import { useState } from 'react';
 import { babelTransform } from './transform';
 import { CodePreviewProps } from './';
+import ReactDOM from 'react-dom';
+
+export const getReactDOMClient = () => {
+  let _ReactDOM;
+  try {
+    // 使用 require 解决 react v17 ts 报错问题
+    _ReactDOM = require('react-dom/client');
+  } catch (err) {
+    // console.warn(`如果使用的是react-dom小于v18的版本，可以忽略此警告：${err}`)
+  }
+  return _ReactDOM;
+};
 
 export function useCodePreview(props: CodePreviewProps) {
   const [demoDom, setDemoDom] = useState<HTMLDivElement>();
@@ -16,6 +25,10 @@ export function useCodePreview(props: CodePreviewProps) {
   const [copied, setCopied] = useState(false);
   const [code, setCode] = useState(props.code || '');
 
+  const ReactDOMClient = React.useMemo(() => {
+    return getReactDOMClient();
+  }, []);
+
   /** 通过缓存的方式 解决 react v18 中 的报错   ***/
   // @ts-ignore
   const cachesRef = React.useRef(new Map<string, ReactDOMClient.Root>([]));
@@ -51,9 +64,9 @@ export function useCodePreview(props: CodePreviewProps) {
       ReactDOMClient: _ReactDOMClient,
       ...otherDeps
     } = props.dependencies || {};
-    const V18ReactDOM = _ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM;
+    let V18ReactDOM = _ReactDOMClient || ReactDOMClient || _ReactDOM || ReactDOM;
     // 判断是否是 react v18版本
-    const isV18 = Reflect.has(V18ReactDOM || {}, 'createRoot');
+    const isV18 = Reflect.has(V18ReactDOM, 'createRoot');
     const NewReactDOM = isV18 ? ReactDOMRender(V18ReactDOM) : V18ReactDOM;
 
     try {