diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx
index 1ac5bb953b..39abcdfc0f 100644
--- a/compiler/apps/playground/components/Editor/Output.tsx
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@@ -16,7 +16,7 @@ import MonacoEditor, { DiffEditor } from "@monaco-editor/react";
import { type CompilerError } from "babel-plugin-react-forget";
import prettier from "prettier";
import prettierParserBabel from "prettier/parser-babel";
-import { memo, useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
import { type Store } from "../../lib/stores";
import TabbedWindow from "../TabbedWindow";
import { monacoOptions } from "./monacoOptions";
@@ -182,6 +182,11 @@ function Output({ store, compilerOutput }: Props) {
() => tabify(store.source, compilerOutput),
[store.source, compilerOutput]
);
+ const consoleLogError = useCallback(() => {
+ if (compilerOutput.kind === "err") {
+ console.error(compilerOutput.error);
+ }
+ }, [compilerOutput]);
return (
<>
@@ -203,7 +208,13 @@ function Output({ store, compilerOutput }: Props) {
className="p-4 basis-full text-red-600 overflow-y-scroll whitespace-pre-wrap"
style={{ width: "calc(100vw - 650px)", height: "150px" }}
>
- {compilerOutput.error.toString()}
+
) : null}
diff --git a/compiler/apps/playground/components/Editor/index.tsx b/compiler/apps/playground/components/Editor/index.tsx
index f642fcabd2..1e664f203d 100644
--- a/compiler/apps/playground/components/Editor/index.tsx
+++ b/compiler/apps/playground/components/Editor/index.tsx
@@ -183,7 +183,6 @@ function compile(source: string): CompilerOutput {
}
return { kind: "ok", results };
} catch (error: any) {
- console.error(error);
// error might be an invariant violation or other runtime error
// (i.e. object shape that is not CompilerError)
if (error.details == null) {