fix #2732 -- always show javascript eval error in jupyter

- also make the error more standard looking

Author: williamstein

src/packages/frontend/jupyter/output-messages/javascript-eval.ts

@@ -12,11 +12,11 @@ maybe safer/cleaner than nothing.
 export function javascript_eval(line: string, element: any): string {
   let requirejs: any;
   let require: any;
-  require = requirejs = () =>
-    console.warn(
-      // TODO: replace "CoCalc"?
+  require = requirejs = () => {
+    throw Error(
       "require is not available in CoCalc; if you need a Javascript library, please email [email protected].",
     );
+  };
   let define = (..._) => {
     throw Error("Custom ipywidgets are not yet supported in CoCalc.");
   };
@@ -26,7 +26,7 @@ export function javascript_eval(line: string, element: any): string {
   try {
     eval(line);
   } catch (err) {
-    console.warn(`Jupyter Eval Error: ${err} -- evaluating "${line}"`);
+    console.warn(`Jupyter Javascript Error: ${err} -- evaluating "${line}"`);
     return `${err}`;
   }
   return "";

src/packages/frontend/jupyter/output-messages/javascript.tsx

@@ -8,15 +8,15 @@ import $ from "jquery";
 import React, { useRef, useState } from "react";
 import { is_array } from "@cocalc/util/misc";
 import { javascript_eval } from "./javascript-eval";
-import { STDERR_STYLE } from "./style";
+import ShowError from "@cocalc/frontend/components/error";
 
 interface JavascriptProps {
   value: string | List<string>;
 }
 
 // ATTN: better don't memoize this, since JS code evaluation happens when this is mounted
 export const Javascript: React.FC<JavascriptProps> = (
-  props: JavascriptProps
+  props: JavascriptProps,
 ) => {
   const { value } = props;
 
@@ -52,16 +52,7 @@ export const Javascript: React.FC<JavascriptProps> = (
   }, [value]);
 
   if (errors) {
-    // This conflicts with official Jupyter
-    return (
-      <div style={STDERR_STYLE}>
-        <span>
-          {errors}
-          <br />
-          See your browser Javascript console for more details.
-        </span>
-      </div>
-    );
+    return <ShowError error={errors} style={{ margin: "10px 0" }} />;
   } else {
     return <div ref={node} />;
   }