TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.useDebugValue is not a functionというエラーが出る。

Question

問題個所

VSCodeのターミナルにてnpm startをすると、localhostにて下記のような画面が表示される。

ちなみにnpm startをした時のターミナルはこんな感じです。

上記のエラー部分ですが、ちょっと自分なりに検索等をかけて調べてみたのですが、TypeError:やis not a functionはJavaScriptにおいてよくあるエラーというぐらいしか分かりませんでした。

また赤字で表示されているCould not open useTheme.js in the editor.についても調べましたが、何かしらの原因で読み込めてないのかなぐらいしか分かりませんでした。

どうしてこうなったの

npm installにて@material-uiを入れたのですが、どうも@material-ui/stylesの部分で何かしらの問題が発生してしまっているような気がします。
エラー文章を単純に読めば、その部分の関数が見つからないという感じでしょうか...？

最後になります

現時点ではどの部分に原因があるのか分かりません。
お手数おかけしますが皆様のお力を頂ければと思います。

###（P.S）追記情報になります。

デバックコンソールではこんな感じになってました。

• AppContent.js（問題と思われる箇所）

import { makeStyles }  from '@material-ui/styles' // この一行目が引っかかってます。
import React from 'react'

const useStyles = makeStyles({
  root: {
    display: 'grid',
    gridRowGap: 16 + 'px',
    margin: 'auto',
    maxWidth: 960,
    padding: 16,
  }
})

const AppContent = ({ children }) => {
  const classes = useStyles()

  return <main className={classes.root}>{children}</main>
}

export default AppContent

• VSCodeでポイントすると出てくる表示

Comments

[hoshi-takanori]

関数コンポーネントじゃないと useTheme などの hook 関数は使えないのでは。

[HoroHoro0316]

ありがとうございます。恥ずかしながらHookがどういうものなのかを今知りました。
すみません、そもそも私の提示する情報が足りてなかったかもしれません。情報追記します。よろしければそちらも見て頂けないでしょうか。

Answer 1

なぜ解決できたのか自分でもあまり分かっておりませんが、
ターミナル上でのnpx npm-check-updates -uとnpm iコマンドを行った後、npm startした結果、正常表示されるようになりましたので自己解決とさせていただきます。

回答くださった方にはお手数かけて頂き、大変ありがとうございました。