[Beta] Fix error precedence (#4666)

beta/src/components/MDX/Sandpack/Error.tsx

@@ -24,25 +24,3 @@ export function Error({error}: {error: ErrorType}) {
     </div>
   );
 }
-
-export function LintError({
-  error: {line, column, message},
-}: {
-  error: {
-    line: number;
-    column: number;
-    message: string;
-  };
-}) {
-  return (
-    <div
-      className={
-        'bg-white border-2 border-orange-40 border- border-red-40 rounded-lg p-6'
-      }>
-      <h2 className="text-red-40 text-xl mb-4">Lint Error</h2>
-      <pre className="text-secondary whitespace-pre-wrap break-words">
-        {line}:{column} - {message}
-      </pre>
-    </div>
-  );
-}

beta/src/components/MDX/Sandpack/Preview.tsx

@@ -7,7 +7,7 @@ import * as React from 'react';
 import {useSandpack, LoadingOverlay} from '@codesandbox/sandpack-react';
 import cn from 'classnames';
 
-import {Error, LintError} from './Error';
+import {Error} from './Error';
 import {computeViewportSize, generateRandomId} from './utils';
 import type {LintDiagnostic} from './utils';
 
@@ -59,6 +59,19 @@ export function Preview({
     // Work around a noisy internal error.
     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.)
+      const {line, column, message} = lintErrors[0];
+      rawError = {
+        title: 'Lint Error',
+        message: `${line}:${column} - ${message}`,
+      };
+    }
+  }
+
   // It changes too fast, causing flicker.
   const error = useDebounced(rawError);
 
@@ -110,7 +123,7 @@ export function Preview({
         maxHeight: undefined,
       }
     : null;
-  const hideContent = !isReady || error || lintErrors.length;
+  const hideContent = !isReady || error;
 
   // WARNING:
   // The layout and styling here is convoluted and really easy to break.
@@ -189,17 +202,6 @@ export function Preview({
           clientId={clientId.current}
           loading={!isReady && iframeComputedHeight === null}
         />
-
-        {/*
-         * TODO: properly style the errors
-         */}
-        {lintErrors.length > 0 && !error && (
-          <div className={cn('p-2', isExpanded ? 'sticky top-8' : null)}>
-            <div style={{zIndex: 99}}>
-              <LintError error={lintErrors[0]} />
-            </div>
-          </div>
-        )}
       </div>
     </div>
   );

beta/src/components/MDX/Sandpack/utils.ts

@@ -108,15 +108,14 @@ export type LintDiagnostic = {
 }[];
 
 export const useSandpackLint = () => {
-  const [lintErrors, setDiagnostic] = useState<LintDiagnostic>([]);
+  const [lintErrors, setLintErrors] = useState<LintDiagnostic>([]);
 
   const onLint = linter((props: EditorView) => {
     const editorState = props.state.doc;
     return import('./eslint-integration').then((module) => {
-      const {errors} = module.lintDiagnostic(editorState);
+      let {errors} = module.lintDiagnostic(editorState);
-
+      // Only show errors from rules, not parsing errors etc
-      setDiagnostic(errors);
+      setLintErrors(errors.filter((e) => !e.fatal));
-
       return module.lintDiagnostic(editorState).codeMirrorPayload;
     });
   });