Xterm.js: Uncaught TypeError: Cannot read property 'foreground' of null

Created on 2 Jun 2019 · 8Comments · Source: xtermjs/xterm.js

Details

Browser and browser version: Google Chrome Version 74.0.3729.169 (Official Build) (64-bit)
OS version: Windows 10 1903 (Build 18362.116)
xterm.js version: 3.14.1

Steps to reproduce

Render terminals in multiple pages in in different Tabs. (Lets say in page1, page2 tabs.)
Switch to page2 from page 1 and come back to page1.

I created two sandboxes in following links. Both have same code except one has xterm 3.13.2 and another has 3.14.1.

https://codesandbox.io/embed/with-xterm-3132-lf4l4
https://codesandbox.io/embed/with-xterm-3141-tmfvc

In the example with 3.14.1 when you switch to page 2 and come back to page 1, it throws the following error. It doesn't happen in 3.13.2. Pasting the complete stack here.

Uncaught TypeError: Cannot read property 'foreground' of null
    at ColorManager.setTheme (VM1439 ColorManager.js:84)
    at Terminal.open (VM1408 Terminal.js:530)
    at Terminal.open (VM1407 Terminal.js:111)
    at eval (VM1259 index.js:72)
    at commitHookEffectList (VM1025 react-dom.development.js:17283)
    at commitPassiveHookEffects (VM1025 react-dom.development.js:17307)
    at HTMLUnknownElement.callCallback (VM1025 react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (VM1025 react-dom.development.js:199)
    at invokeGuardedCallback (VM1025 react-dom.development.js:256)
    at commitPassiveEffects (VM1025 react-dom.development.js:18774)
    at wrapped (VM1034 scheduler-tracing.development.js:207)
    at flushPassiveEffects (VM1025 react-dom.development.js:18822)
    at renderRoot (VM1025 react-dom.development.js:19365)
    at performWorkOnRoot (VM1025 react-dom.development.js:20342)
    at performWork (VM1025 react-dom.development.js:20254)
    at performSyncWork (VM1025 react-dom.development.js:20228)
    at interactiveUpdates$1 (VM1025 react-dom.development.js:20495)
    at interactiveUpdates (VM1025 react-dom.development.js:2170)
    at dispatchInteractiveEvent (VM1025 react-dom.development.js:4882)

The above error occurred in the <TerminalPage> component:
    in TerminalPage (created by App)
    in div (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ sandbox.396df30c.js:1
t.<computed> @ common-sandbox.a39946ab.chunk.js:8
logCapturedError @ react-dom.development.js:17117
logError @ react-dom.development.js:17153
update.callback @ react-dom.development.js:18065
callCallback @ react-dom.development.js:16433
commitUpdateEffects @ react-dom.development.js:16472
commitUpdateQueue @ react-dom.development.js:16460
commitLifeCycles @ react-dom.development.js:17383
commitAllLifeCycles @ react-dom.development.js:18736
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18948
(anonymous) @ react-dom.development.js:20418
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20417
performWorkOnRoot @ react-dom.development.js:20346
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
interactiveUpdates$1 @ react-dom.development.js:20495
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882
react-dom.development.js:210 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (VM1025 react-dom.development.js:210)
    at invokeGuardedCallback (VM1025 react-dom.development.js:256)
    at commitPassiveEffects (VM1025 react-dom.development.js:18774)
    at wrapped (VM1034 scheduler-tracing.development.js:207)
    at flushPassiveEffects (VM1025 react-dom.development.js:18822)
    at renderRoot (VM1025 react-dom.development.js:19365)
    at performWorkOnRoot (VM1025 react-dom.development.js:20342)
    at performWork (VM1025 react-dom.development.js:20254)
    at performSyncWork (VM1025 react-dom.development.js:20228)
    at interactiveUpdates$1 (VM1025 react-dom.development.js:20495)
    at interactiveUpdates (VM1025 react-dom.development.js:2170)
    at dispatchInteractiveEvent (VM1025 react-dom.development.js:4882)

It's possible I might be doing something wrong here. Since it's the same code, wanted to know if there is any breaking change or am I doing something wrong here ?

typbug

Source