Misnamed Widget lags application with "Error Boundary" in console

[caelinsutch]

After misnaming a passed in variable to the <LiveEditor>, I get the following errors:

Uncaught ReferenceError: widget_name is not defined
    at eval (eval at evalCode (react-live.es.js:291), <anonymous>:4:65)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at flushPendingDiscreteUpdates (react-dom.development.js:21847)
    at flushDiscreteUpdates (react-dom.development.js:21827)
    at finishEventHandler (react-dom.development.js:764)
    at batchedEventUpdates (react-dom.development.js:798)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

Then:

index.js:1 The above error occurred in one of your React components:
    in Unknown (created by ErrorBoundary)
    in ErrorBoundary (created by Context.Consumer)
    in div (created by LivePreview)
    in LivePreview (at WidgetPage.tsx:44)
    in div (created by Center)
    in Center (at WidgetPage.tsx:43)
    in div (created by Box)
    in Box (at WidgetPage.tsx:42)
    in div (created by Center)
    in Center (at WidgetPage.tsx:41)
    in div (created by Box)
    in Box (at WidgetPage.tsx:40)
    in div (created by Styled(div))
    in Styled(div) (created by Grid)
    in Grid (created by SimpleGrid)
    in SimpleGrid (at WidgetPage.tsx:33)
    in LiveProvider (at WidgetPage.tsx:32)
    in WidgetPage (created by Context.Consumer)
    in Route (at app.tsx:10)
    in Switch (at app.tsx:9)
    in App (at src/index.tsx:9)
    in RecoilRoot (at RootProviders.tsx:9)
    in ColorModeProvider (created by ChakraProvider)
    in ThemeProvider (created by ChakraProvider)
    in ChakraProvider (at RootProviders.tsx:8)
    in Router (created by BrowserRouter)
    in BrowserRouter (at RootProviders.tsx:7)
    in RootProvider (at src/index.tsx:8)
    in StrictMode (at src/index.tsx:7)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

And finally:

index.js:1 Warning: ErrorBoundary: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
    in ErrorBoundary (created by Context.Consumer)
    in div (created by LivePreview)
    in LivePreview (at WidgetPage.tsx:44)
    in div (created by Center)
    in Center (at WidgetPage.tsx:43)
    in div (created by Box)
    in Box (at WidgetPage.tsx:42)
    in div (created by Center)
    in Center (at WidgetPage.tsx:41)
    in div (created by Box)
    in Box (at WidgetPage.tsx:40)
    in div (created by Styled(div))
    in Styled(div) (created by Grid)
    in Grid (created by SimpleGrid)
    in SimpleGrid (at WidgetPage.tsx:33)
    in LiveProvider (at WidgetPage.tsx:32)
    in WidgetPage (created by Context.Consumer)
    in Route (at app.tsx:10)
    in Switch (at app.tsx:9)
    in App (at src/index.tsx:9)
    in RecoilRoot (at RootProviders.tsx:9)
    in ColorModeProvider (created by ChakraProvider)
    in ThemeProvider (created by ChakraProvider)
    in ChakraProvider (at RootProviders.tsx:8)
    in Router (created by BrowserRouter)
    in BrowserRouter (at RootProviders.tsx:7)
    in RootProvider (at src/index.tsx:8)
    in StrictMode (at src/index.tsx:7)

This lags the entire application until the variable name is resolved

[benarmstrongg]

also experiencing this, I think I can provide more context. It looks like this error only occurs in the component's top level scope, so MyComponent = () => { h } causes uncaught error and slows entire application, whereas MyComponent = () => { const myFunc = () => { h } } seems to be fine.