Closed kousher-alam closed 2 years ago
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.
This issue pertains to the following package(s):
I'm using react 17 with typescript. it compiles successfully. but when in browser getting the error.