TimboKZ / Chonky

😸 A File Browser component for React.
https://chonky.io
MIT License
751 stars 166 forks source link

Default project gives multiple warnings: "Symbol.observable as defined by Redux and Redux DevTools do not match. This could cause your app to behave differently if the DevTools are not loaded. Consider polyfilling Symbol.observable before Redux is imported or avoid polyfilling Symbol.observable altogether.", "react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot","styleFunctionSx.js:61 Material-UI: The `css` function is deprecated. Use the `styleFunctionSx` instead." #138

Open saimanoharhm opened 2 years ago

saimanoharhm commented 2 years ago

When building the example from the Installation & Usage page, I get the following warning:

As some said in issue #104. I am also getting these warnings along with #104.

styleFunctionSx.js:61 Material-UI: Thecssfunction is deprecated. Use thestyleFunctionSxinstead. css @ styleFunctionSx.js:61 ./node_modules/@material-ui/core/esm/Box/Box.js @ Box.js:3 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 fn @ hot module replacement:62 ./node_modules/chonky/dist/chonky.esm.js @ ChonkyIconFA.tsx:161 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 fn @ hot module replacement:62 ./src/App.tsx @ bundle.js:17 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 fn @ hot module replacement:62 ./src/index.tsx @ App.tsx:128 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 (anonymous) @ startup:7 (anonymous) @ startup:7 react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ react-dom.development.js:86 error @ react-dom.development.js:60 render @ react-dom.development.js:29404 ./src/index.tsx @ index.tsx:7 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 (anonymous) @ startup:7 (anonymous) @ startup:7 VM329:2491 Symbol.observable as defined by Redux and Redux DevTools do not match. This could cause your app to behave differently if the DevTools are not loaded. Consider polyfilling Symbol.observable before Redux is imported or avoid polyfilling Symbol.observable altogether. M @ VM329:2491 (anonymous) @ VM329:2595 (anonymous) @ VM329:3548 (anonymous) @ redux.js:650 (anonymous) @ VM329:3662 createStore @ redux.js:154 configureStore @ configureStore.ts:192 (anonymous) @ store.ts:19 useStaticValue @ hooks-helpers.ts:25 useChonkyStore @ store.ts:13 (anonymous) @ FileBrowser.tsx:64 renderWithHooks @ react-dom.development.js:16141 updateForwardRef @ react-dom.development.js:19968 beginWork @ react-dom.development.js:22391 beginWork$1 @ react-dom.development.js:27219 performUnitOfWork @ react-dom.development.js:26392 workLoopSync @ react-dom.development.js:26303 renderRootSync @ react-dom.development.js:26271 performSyncWorkOnRoot @ react-dom.development.js:25924 flushSyncCallbacks @ react-dom.development.js:11982 flushSync @ react-dom.development.js:26040 legacyCreateRootFromDOMContainer @ react-dom.development.js:29309 legacyRenderSubtreeIntoContainer @ react-dom.development.js:29335 render @ react-dom.development.js:29419 ./src/index.tsx @ index.tsx:7 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 (anonymous) @ startup:7 (anonymous) @ startup:7 VM326:249 Symbol.observable as defined by Redux and Redux DevTools do not match. This could cause your app to behave differently if the DevTools are not loaded. Consider polyfilling Symbol.observable before Redux is imported or avoid polyfilling Symbol.observable altogether. overrideMethod @ VM326:249 M @ VM329:2491 (anonymous) @ VM329:2595 (anonymous) @ VM329:3548 (anonymous) @ redux.js:650 (anonymous) @ VM329:3662 createStore @ redux.js:154 configureStore @ configureStore.ts:192 (anonymous) @ store.ts:19 useStaticValue @ hooks-helpers.ts:25 useChonkyStore @ store.ts:13 (anonymous) @ FileBrowser.tsx:64 renderWithHooks @ react-dom.development.js:16141 updateForwardRef @ react-dom.development.js:19975 beginWork @ react-dom.development.js:22391 beginWork$1 @ react-dom.development.js:27219 performUnitOfWork @ react-dom.development.js:26392 workLoopSync @ react-dom.development.js:26303 renderRootSync @ react-dom.development.js:26271 performSyncWorkOnRoot @ react-dom.development.js:25924 flushSyncCallbacks @ react-dom.development.js:11982 flushSync @ react-dom.development.js:26040 legacyCreateRootFromDOMContainer @ react-dom.development.js:29309 legacyRenderSubtreeIntoContainer @ react-dom.development.js:29335 render @ react-dom.development.js:29419 ./src/index.tsx @ index.tsx:7 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 (anonymous) @ startup:7 (anonymous) @ startup:7 tiny-warning.esm.js:11 Warning: [JSS] <Hook />'s styles function doesn't rely on the "theme" argument. We recommend declaring styles as an object instead. warning @ tiny-warning.esm.js:11 getStyles @ react-jss.esm.js:148 createStyleSheet @ react-jss.esm.js:190 (anonymous) @ react-jss.esm.js:295 mountMemo @ react-dom.development.js:17057 useMemo @ react-dom.development.js:17517 useMemo @ react.development.js:1645 useStyles @ react-jss.esm.js:294 (anonymous) @ DnDFileEntry.tsx:19 renderWithHooks @ react-dom.development.js:16141 updateFunctionComponent @ react-dom.development.js:20313 updateSimpleMemoComponent @ react-dom.development.js:20151 updateMemoComponent @ react-dom.development.js:20026 beginWork @ react-dom.development.js:22428 beginWork$1 @ react-dom.development.js:27219 performUnitOfWork @ react-dom.development.js:26392 workLoopSync @ react-dom.development.js:26303 renderRootSync @ react-dom.development.js:26271 performSyncWorkOnRoot @ react-dom.development.js:25924 flushSyncCallbacks @ react-dom.development.js:11982 flushSync @ react-dom.development.js:26040 legacyCreateRootFromDOMContainer @ react-dom.development.js:29309 legacyRenderSubtreeIntoContainer @ react-dom.development.js:29335 render @ react-dom.development.js:29419 ./src/index.tsx @ index.tsx:7 options.factory @ react refresh:6 __webpack_require__ @ bootstrap:24 (anonymous) @ startup:7 (anonymous) @ startup:7 tiny-warning.esm.js:11 Warning: [JSS] <Hook />'s styles function doesn't rely on the "theme" argument. We recommend declaring styles as an object instead. image

saimanoharhm commented 2 years ago

@TimboKZ Could you please look into these warnings?

patkelly174 commented 2 years ago

Getting these warnings as well