diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx index 17c86fab..2b33f4e0 100644 --- a/beta/src/components/MDX/Sandpack/Preview.tsx +++ b/beta/src/components/MDX/Sandpack/Preview.tsx @@ -61,16 +61,23 @@ export function Preview({ rawError = null; } - if (lintErrors.length > 0) { - if (rawError == null || rawError.title === 'Runtime Exception') { - // When there's a lint error, show it -- even over a runtime error. - // (However, when there's a build error, we keep showing the build one.) + // Memoized because it's fed to debouncing. + const firstLintError = React.useMemo(() => { + if (lintErrors.length === 0) { + return null; + } else { const {line, column, message} = lintErrors[0]; - rawError = { + return { title: 'Lint Error', message: `${line}:${column} - ${message}`, }; } + }, [lintErrors]); + + if (rawError == null || rawError.title === 'Runtime Exception') { + if (firstLintError !== null) { + rawError = firstLintError; + } } // It changes too fast, causing flicker.