working on react typescript

[zeev-mindali]

dear friend,

trying to implement your component on react with typescript. getting error: Could not find a declaration file for module 'react-thermostat'. '/Users/zeevmindali/Desktop/smarthouse/node_modules/react-thermostat/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/react-thermostat if it exists or add a new declaration (.d.ts) file containing declare module 'react-thermostat';

[shannonhochkins]

I didn't have this issue installing it in my other typescript application, can you send your tsconfig?

[shannonhochkins]

Apologies - I've fixed this up if you install the latest version it should be rectified

[zeev-mindali]

now i getting errors in the console :

Uncaught TypeError: (0 , ts_deepmergeWEBPACK_IMPORTED_MODULE_3).withOptions is not a function at $090815f5086f7f29$export$c1cbc01833f43ebe (index.tsx:134:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) $090815f5086f7f29$export$c1cbc01833f43ebe @ index.tsx:134 renderWithHooks @ react-dom.development.js:16305 mountIndeterminateComponent @ react-dom.development.js:20074 beginWork @ react-dom.development.js:21587 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27451 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 performSyncWorkOnRoot @ react-dom.development.js:26085 flushSyncCallbacks @ react-dom.development.js:12042 flushSync @ react-dom.development.js:26201 scheduleRefresh @ react-dom.development.js:27795 renderer.scheduleRefresh @ react_devtools_backend.js:6514 (anonymous) @ react-refresh-runtime.development.js:304 performReactRefresh @ react-refresh-runtime.development.js:293 (anonymous) @ RefreshUtils.js:85 setTimeout (async) enqueueUpdate @ RefreshUtils.js:83 executeRuntime @ RefreshUtils.js:243 $ReactRefreshModuleRuntime$ @ AirCondition.tsx:36 ./src/Components/Units/AirCondition/AirCondition.tsx @ AirCondition.tsx:36 options.factory @ react refresh:6 webpack_require @ bootstrap:24 _requireSelf @ hot module replacement:102 apply @ jsonp chunk loading:444 (anonymous) @ hot module replacement:344 internalApply @ hot module replacement:342 (anonymous) @ hot module replacement:279 waitForBlockingPromises @ hot module replacement:233 (anonymous) @ hot module replacement:277 Promise.then (async) (anonymous) @ hot module replacement:276 Promise.then (async) (anonymous) @ hot module replacement:256 Promise.then (async) hotCheck @ hot module replacement:247 check @ dev-server.js:13 (anonymous) @ dev-server.js:55 emit @ events.js:153 reloadApp @ reloadApp.js:46 warnings @ index.js:261 (anonymous) @ socket.js:60 client.onmessage @ WebSocketClient.js:50 4index.tsx:134 Uncaught TypeError: (0 , ts_deepmergeWEBPACK_IMPORTED_MODULE_3).withOptions is not a function at $090815f5086f7f29$export$c1cbc01833f43ebe (index.tsx:134:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) $090815f5086f7f29$export$c1cbc01833f43ebe @ index.tsx:134 renderWithHooks @ react-dom.development.js:16305 mountIndeterminateComponent @ react-dom.development.js:20074 beginWork @ react-dom.development.js:21587 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27451 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 recoverFromConcurrentError @ react-dom.development.js:25850 performSyncWorkOnRoot @ react-dom.development.js:26096 flushSyncCallbacks @ react-dom.development.js:12042 flushSync @ react-dom.development.js:26201 scheduleRefresh @ react-dom.development.js:27795 renderer.scheduleRefresh @ react_devtools_backend.js:6514 (anonymous) @ react-refresh-runtime.development.js:304 performReactRefresh @ react-refresh-runtime.development.js:293 (anonymous) @ RefreshUtils.js:85 setTimeout (async) enqueueUpdate @ RefreshUtils.js:83 executeRuntime @ RefreshUtils.js:243 $ReactRefreshModuleRuntime$ @ AirCondition.tsx:36 ./src/Components/Units/AirCondition/AirCondition.tsx @ AirCondition.tsx:36 options.factory @ react refresh:6 webpack_require @ bootstrap:24 _requireSelf @ hot module replacement:102 apply @ jsonp chunk loading:444 (anonymous) @ hot module replacement:344 internalApply @ hot module replacement:342 (anonymous) @ hot module replacement:279 waitForBlockingPromises @ hot module replacement:233 (anonymous) @ hot module replacement:277 Promise.then (async) (anonymous) @ hot module replacement:276 Promise.then (async) (anonymous) @ hot module replacement:256 Promise.then (async) hotCheck @ hot module replacement:247 check @ dev-server.js:13 (anonymous) @ dev-server.js:55 emit @ events.js:153 reloadApp @ reloadApp.js:46 warnings @ index.js:261 (anonymous) @ socket.js:60 client.onmessage @ WebSocketClient.js:50 4react_devtools_backend.js:4026 The above error occurred in the <$090815f5086f7f29$export$c1cbc01833f43ebe> component:

at $090815f5086f7f29$export$c1cbc01833f43ebe (http://localhost:3000/main.84600a0cf57d445fe467.hot-update.js:952:5)
at Thermo (http://localhost:3000/main.84600a0cf57d445fe467.hot-update.js:155:76)
at div
at AirCondition (http://localhost:3000/main.84600a0cf57d445fe467.hot-update.js:40:70)
at div
at DashBoard
at main
at div
at MainLayout

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. overrideMethod @ react_devtools_backend.js:4026 logCapturedError @ react-dom.development.js:18687 update.callback @ react-dom.development.js:18720 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23391 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 flushSync @ react-dom.development.js:26201 scheduleRefresh @ react-dom.development.js:27795 renderer.scheduleRefresh @ react_devtools_backend.js:6514 (anonymous) @ react-refresh-runtime.development.js:304 performReactRefresh @ react-refresh-runtime.development.js:293 (anonymous) @ RefreshUtils.js:85 setTimeout (async) enqueueUpdate @ RefreshUtils.js:83 executeRuntime @ RefreshUtils.js:243 $ReactRefreshModuleRuntime$ @ AirCondition.tsx:36 ./src/Components/Units/AirCondition/AirCondition.tsx @ AirCondition.tsx:36 options.factory @ react refresh:6 webpack_require @ bootstrap:24 _requireSelf @ hot module replacement:102 apply @ jsonp chunk loading:444 (anonymous) @ hot module replacement:344 internalApply @ hot module replacement:342 (anonymous) @ hot module replacement:279 waitForBlockingPromises @ hot module replacement:233 (anonymous) @ hot module replacement:277 Promise.then (async) (anonymous) @ hot module replacement:276 Promise.then (async) (anonymous) @ hot module replacement:256 Promise.then (async) hotCheck @ hot module replacement:247 check @ dev-server.js:13 (anonymous) @ dev-server.js:55 emit @ events.js:153 reloadApp @ reloadApp.js:46 warnings @ index.js:261 (anonymous) @ socket.js:60 client.onmessage @ WebSocketClient.js:50 react-refresh-runtime.development.js:315 Uncaught TypeError: (0 , ts_deepmergeWEBPACK_IMPORTED_MODULE_3).withOptions is not a function at $090815f5086f7f29$export$c1cbc01833f43ebe (index.tsx:134:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) at recoverFromConcurrentError (react-dom.development.js:25850:1) at performSyncWorkOnRoot (react-dom.development.js:26096:1) $090815f5086f7f29$export$c1cbc01833f43ebe @ index.tsx:134 renderWithHooks @ react-dom.development.js:16305 mountIndeterminateComponent @ react-dom.development.js:20074 beginWork @ react-dom.development.js:21587 beginWork$1 @ react-dom.development.js:27426 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 recoverFromConcurrentError @ react-dom.development.js:25850 performSyncWorkOnRoot @ react-dom.development.js:26096 flushSyncCallbacks @ react-dom.development.js:12042 flushSync @ react-dom.development.js:26201 scheduleRefresh @ react-dom.development.js:27795 renderer.scheduleRefresh @ react_devtools_backend.js:6514 (anonymous) @ react-refresh-runtime.development.js:304 performReactRefresh @ react-refresh-runtime.development.js:293 (anonymous) @ RefreshUtils.js:85 setTimeout (async) enqueueUpdate @ RefreshUtils.js:83 executeRuntime @ RefreshUtils.js:243 $ReactRefreshModuleRuntime$ @ AirCondition.tsx:36 ./src/Components/Units/AirCondition/AirCondition.tsx @ AirCondition.tsx:36 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 _requireSelf @ hot module replacement:102 apply @ jsonp chunk loading:444 (anonymous) @ hot module replacement:344 internalApply @ hot module replacement:342 (anonymous) @ hot module replacement:279 waitForBlockingPromises @ hot module replacement:233 (anonymous) @ hot module replacement:277 Promise.then (async) (anonymous) @ hot module replacement:276 Promise.then (async) (anonymous) @ hot module replacement:256 Promise.then (async) hotCheck @ hot module replacement:247 check @ dev-server.js:13 (anonymous) @ dev-server.js:55 emit @ events.js:153 reloadApp @ reloadApp.js:46 warnings @ index.js:261 (anonymous) @ socket.js:60 client.onmessage @ WebSocketClient.js:50