diff --git a/beta/package.json b/beta/package.json index a6c6bedb0b9..394c6085f9f 100644 --- a/beta/package.json +++ b/beta/package.json @@ -20,7 +20,7 @@ "postinstall": "is-ci || (cd .. && husky install beta/.husky)" }, "dependencies": { - "@codesandbox/sandpack-react": "^0.1.20", + "@codesandbox/sandpack-react": "0.3.8-alpha.4", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.3.0", diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index c4b72601fc4..26cb184a622 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -8,9 +8,10 @@ import {flushSync} from 'react-dom'; import { useSandpack, useActiveCode, - SandpackCodeEditor, SandpackThemeProvider, } from '@codesandbox/sandpack-react'; +import { SandpackCodeEditor } from "@codesandbox/sandpack-react/dist/components/CodeEditor" + import scrollIntoView from 'scroll-into-view-if-needed'; import {IconChevron} from 'components/Icon/IconChevron'; @@ -18,6 +19,8 @@ import {NavigationBar} from './NavigationBar'; import {Preview} from './Preview'; import {CustomTheme} from './Themes'; +// const SandpackCodeEditor = React.lazy(() => import('@codesandbox/sandpack-react/dist/components/CodeEditor').then(module => module.SandpackCodeEditor) as any) + export function CustomPreset({ isSingleFile, onReset, @@ -60,15 +63,17 @@ export function CustomPreset({ // There has to be some better way to do this... minHeight: 216, }}> - + {code}}> + +