Error: Unable to find node on an unmounted component.

[kousher-alam]

This issue pertains to the following package(s):

• [-] GraphQL Playground

I'm using react 17 with typescript. it compiles successfully. but when in browser getting the error.

×
←→1 of 3 errors on the page
Error: Unable to find node on an unmounted component.
▼ 20 stack frames were expanded.
findHostInstanceWithWarning
C:/projects/OI-Tracking/react-client/node_modules/graphql-playground-react/node_modules/react-dom/cjs/react-dom.development.js:24281
findDOMNode
C:/projects/OI-Tracking/react-client/node_modules/graphql-playground-react/node_modules/react-dom/cjs/react-dom.development.js:24804
_class.setDraggable
C:/projects/OI-Tracking/react-client/node_modules/graphql-playground-react/node_modules/react-sortable-hoc/dist/commonjs/SortableElement/index.js:99
_class.componentDidMount
C:/projects/OI-Tracking/react-client/node_modules/graphql-playground-react/node_modules/react-sortable-hoc/dist/commonjs/SortableElement/index.js:62
commitLifeCycles
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:20663
commitLayoutEffects
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:23426
HTMLUnknownElement.callCallback
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:3945
invokeGuardedCallbackDev
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:3994
invokeGuardedCallback
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:4056
commitRootImpl
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:23151
unstable_runWithPriority
C:/projects/OI-Tracking/react-client/node_modules/scheduler/cjs/scheduler.development.js:646
runWithPriority$1
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:11276
commitRoot
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:22990
performSyncWorkOnRoot
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:22329
scheduleUpdateOnFiber
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:21881
updateContainer
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:25482
(anonymous function)
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:26021
unbatchedUpdates
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:22431
legacyRenderSubtreeIntoContainer
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:26020
render
C:/projects/OI-Tracking/react-client/node_modules/react-dom/cjs/react-dom.development.js:26103
▲ 20 stack frames were expanded.
Module.<anonymous>
C:/projects/OI-Tracking/react-client/src/index.tsx:9
   6 | 
   7 | 
   8 | 
>  9 | ReactDOM.render(
  10 |   <React.StrictMode>
  11 |     <App />
  12 |   </React.StrictMode>,
View compiled
Module../src/index.tsx
http://localhost:3000/static/js/main.chunk.js:3312:30
__webpack_require__
C:/projects/OI-Tracking/react-client/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
C:/projects/OI-Tracking/react-client/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:12209:18
__webpack_require__
C:/projects/OI-Tracking/react-client/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
checkDeferredModules
C:/projects/OI-Tracking/react-client/webpack/bootstrap:45
  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
C:/projects/OI-Tracking/react-client/webpack/bootstrap:32
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:83
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.