{"id":4198,"date":"2022-10-11T11:58:21","date_gmt":"2022-10-11T02:58:21","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=4198"},"modified":"2022-10-11T12:20:30","modified_gmt":"2022-10-11T03:20:30","slug":"react18-2-0-and-mui-styles-conflict","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=4198","title":{"rendered":"react@18.2.0 and @mui\/styles conflict <\/small>"},"content":{"rendered":"

1. react@18.2.0 and @mui\/styles conflict<\/p>\n

2.conflict<\/p>\n

\r\n$ npm ls react\r\nmay-app@0.1.0 \/home\/wsd01\/RentaCycleManagr\/RCM-88\r\n\u251c\u2500\u252c @emotion\/react@11.10.4\r\n\u2502 \u251c\u2500\u252c @emotion\/use-insertion-effect-with-fallbacks@1.0.0\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @emotion\/styled@11.10.4\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @mui\/base@5.0.0-alpha.100\r\n\u2502 \u251c\u2500\u252c @mui\/utils@5.10.6\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @mui\/icons-material@5.10.6\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @mui\/material@5.10.8\r\n\u2502 \u251c\u2500\u252c @mui\/system@5.10.8\r\n\u2502 \u2502 \u251c\u2500\u252c @mui\/styled-engine@5.10.8\r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2502 \u251c\u2500\u252c react-transition-group@4.4.5\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @mui\/styles@5.10.8\r\n\u2502 \u251c\u2500\u252c @mui\/private-theming@5.10.6\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u251c\u2500\u252c @mui\/x-data-grid@5.17.6\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u251c\u2500\u252c @mui\/x-date-pickers@5.0.4\r\n\u2502 \u251c\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2502 \u2514\u2500\u252c rifm@0.12.1\r\n\u2502   \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u251c\u2500\u252c next-auth@4.13.0\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u251c\u2500\u252c next@12.3.0\r\n\u2502 \u251c\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2502 \u251c\u2500\u252c styled-jsx@5.0.6\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2502 \u2514\u2500\u252c use-sync-external-store@1.2.0\r\n\u2502   \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u251c\u2500\u252c react-dom@18.2.0\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u251c\u2500\u252c react-icons@4.4.0\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u251c\u2500\u2500 react@18.2.0 invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\u2514\u2500\u252c swr@1.3.0\r\n  \u2514\u2500\u2500 react@18.2.0 deduped invalid: \"^17.0.0\" from node_modules\/@mui\/styles\r\n\r\nnpm ERR! code ELSPROBLEMS\r\nnpm ERR! invalid: react@18.2.0 \/home\/wsd01\/RentaCycleManagr\/RCM-88\/node_modules\/react\r\n\r\nnpm ERR! A complete log of this run can be found in:\r\nnpm ERR!     \/home\/wsd01\/.npm\/_logs\/2022-10-11T02_54_15_582Z-debug-0.log\r\n<\/pre>\n
3. remove @mui\/styles<\/p>\n
\r\n$ yarn remove @mui\/styles\r\n<\/pre>\n
4. confirm<\/p>\n
\r\n$ npm ls react\r\nmay-app@0.1.0 \/home\/wsd01\/RentaCycleManagr\/RCM-88\r\n\u251c\u2500\u252c @emotion\/react@11.10.4\r\n\u2502 \u251c\u2500\u252c @emotion\/use-insertion-effect-with-fallbacks@1.0.0\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @emotion\/styled@11.10.4\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @mui\/base@5.0.0-alpha.100\r\n\u2502 \u251c\u2500\u252c @mui\/utils@5.10.6\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @mui\/icons-material@5.10.6\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @mui\/material@5.10.8\r\n\u2502 \u251c\u2500\u252c @mui\/system@5.10.8\r\n\u2502 \u2502 \u251c\u2500\u252c @mui\/private-theming@5.10.6\r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u2502 \u2502 \u251c\u2500\u252c @mui\/styled-engine@5.10.8\r\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u2502 \u251c\u2500\u252c react-transition-group@4.4.5\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @mui\/x-data-grid@5.17.6\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c @mui\/x-date-pickers@5.0.4\r\n\u2502 \u251c\u2500\u2500 react@18.2.0 deduped\r\n\u2502 \u2514\u2500\u252c rifm@0.12.1\r\n\u2502   \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c next-auth@4.13.0\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c next@12.3.0\r\n\u2502 \u251c\u2500\u2500 react@18.2.0 deduped\r\n\u2502 \u251c\u2500\u252c styled-jsx@5.0.6\r\n\u2502 \u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u2502 \u2514\u2500\u252c use-sync-external-store@1.2.0\r\n\u2502   \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c react-dom@18.2.0\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u252c react-icons@4.4.0\r\n\u2502 \u2514\u2500\u2500 react@18.2.0 deduped\r\n\u251c\u2500\u2500 react@18.2.0\r\n\u2514\u2500\u252c swr@1.3.0\r\n  \u2514\u2500\u2500 react@18.2.0 deduped\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
1. react@18.2.0 and @mui\/styles conflict 2.conflict $ npm ls react may-app@0.1.0 \/home\/wsd01\/RentaCycleManagr\/…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4198"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4198"}],"version-history":[{"count":4,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4198\/revisions"}],"predecessor-version":[{"id":4200,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4198\/revisions\/4200"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}