使用材质 UI 的挂钩调用无效答案

【问题标题】：Invalid hook call using material UI使用材质 UI 的挂钩调用无效
【发布时间】：2022-01-27 14:55:00
【问题描述】：

我没有 useStyles 像许多其他问题一样。我所做的就是在正文中包含一个空的 Grid，如下所示：

import Grid from '@mui/material/Grid'; 

export const index = () => {
  return (
    <>
       <body>
          <Grid container spacing={1}>
          </Grid>
       </body>
    </>
  )
}

我尝试从 package.json 中删除“react”和“react-dom”，但没有成功。一些解决方案建议操作 webpack 文件，但我没有看到。这是我的 package.json：

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier . --write"
  },
  "dependencies": {
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^5.0.0-beta.0",
    "bootstrap": "^4.6.0",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-audio-player": "^0.17.0",
    "react-bootstrap": "^1.6.1",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/react": "17.0.15",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "file-loader": "^6.2.0",
    "prettier": "^2.3.2",
    "typescript": "4.3.5",
    "url-loader": "^4.1.1",
    "webpack": "^5.45.1"
  }
}

这是错误

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/Users/alisonqiu/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/Users/alisonqiu/node_modules/react/cjs/react.development.js:1484:20)
    at useTheme (/Users/alisonqiu/node_modules/@mui/private-theming/node/useTheme/useTheme.js:19:23)
    at useTheme (/Users/alisonqiu/node_modules/@mui/system/useThemeWithoutDefault.js:15:53)
    at useTheme (/Users/alisonqiu/node_modules/@mui/system/useTheme.js:18:46)
    at useThemeProps (/Users/alisonqiu/node_modules/@mui/system/useThemeProps/useThemeProps.js:19:39)
    at useThemeProps (/Users/alisonqiu/node_modules/@mui/material/node/styles/useThemeProps.js:18:36)
    at Object.Grid [as render] (/Users/alisonqiu/node_modules/@mui/material/node/Grid/Grid.js:317:49)
    at ReactDOMServerRenderer.render (/Users/alisonqiu/Downloads/orcahome1/node_modules/react-dom/cjs/react-dom-server.node.development.js:3872:44)
    at ReactDOMServerRenderer.read (/Users/alisonqiu/Downloads/orcahome1/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
wait  - compiling...
event - compiled successfully
wait  - compiling...
HookWebpackError: Cannot read properties of undefined (reading 'replace')
    at makeWebpackError (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:58378:9)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43243:12
    at eval (eval at create (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:12:1)
    at fn (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:41175:17)
    at Hook.eval [as callAsync] (eval at create (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at cont (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43240:34)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43286:10
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at Object.each (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9616)
-- inner error --
TypeError: Cannot read properties of undefined (reading 'replace')
    at PagesManifestPlugin.createAssets (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.js:5:148)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.js:7:82
    at fn (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:41173:10)
    at Hook.eval [as callAsync] (eval at create (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at cont (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43240:34)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43286:10
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at Object.each (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9616)
    at Compilation.createChunkAssets (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:44517:12)
caused by plugins in Compilation.hooks.processAssets
TypeError: Cannot read properties of undefined (reading 'replace')
    at PagesManifestPlugin.createAssets (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.js:5:148)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.js:7:82
    at fn (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:41173:10)
    at Hook.eval [as callAsync] (eval at create (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at cont (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43240:34)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43286:10
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at Object.each (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9616)
    at Compilation.createChunkAssets (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:44517:12)
HookWebpackError: Cannot read properties of undefined (reading 'replace')
    at makeWebpackError (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:58378:9)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43243:12
    at eval (eval at create (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:12:1)
    at fn (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:41175:17)
    at Hook.eval [as callAsync] (eval at create (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at cont (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43240:34)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43286:10
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at Object.each (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9616)
-- inner error --
TypeError: Cannot read properties of undefined (reading 'replace')
    at PagesManifestPlugin.createAssets (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.js:5:148)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.js:7:82
    at fn (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:41173:10)
    at Hook.eval [as callAsync] (eval at create (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at cont (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43240:34)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43286:10
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at Object.each (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9616)
    at Compilation.createChunkAssets (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:44517:12)
caused by plugins in Compilation.hooks.processAssets
TypeError: Cannot read properties of undefined (reading 'replace')
    at PagesManifestPlugin.createAssets (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.js:5:148)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.js:7:82
    at fn (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:41173:10)
    at Hook.eval [as callAsync] (eval at create (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
    at cont (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43240:34)
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:43286:10
    at /Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at Object.each (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/neo-async/async.js:1:9616)
    at Compilation.createChunkAssets (/Users/alisonqiu/Downloads/orcahome1/node_modules/next/dist/compiled/webpack/bundle5.js:44517:12)

【问题讨论】：

您的第一个正文标签是</body>，而不是<body>。而且，你需要body标签吗？通常，react 应用程序会在 index.html 主体内的根 div 中呈现
您使用 MUI 测试版是否有原因？另外，您确定这是您的问题的根源吗？我认为您在错误的地方寻找问题/解决方案。您如何使用index？ React 组件也应该以大写的第一个字母开头..
您的 package.json 显示为 "@material-ui/core": "^5.0.0-beta.0"，但您导入为 @mui？您实际安装了哪个？
@ChiefMcFrank 抱歉，当我创建这个问题时，我没有正确复制它，但正文标签不是问题
@BrianThompson 这个 repo 是使用 nextJS 构建的。也许这就是为什么索引是小写的。该程序运行良好，直到我尝试将 MUI 换成引导程序

标签： reactjs json material-ui dependencies

【解决方案1】：

这与绑定声明和默认导出的概念性质的差异有关，所以你试图同时导出和声明一个变量！

所以你的代码可能是

import Grid from '@mui/material/Grid'; 

export default () => {
  return (
    <>
       <body>
          <Grid container spacing={1}>
          </Grid>
       </body>
    </>
  )
}

或


import Grid from '@mui/material/Grid'; 

const Index = () => {
  return (
    <>
       <body>
          <Grid container spacing={1}>
          </Grid>
       </body>
    </>
  )
}

export default Index;

代码沙盒

https://codesandbox.io/s/basicgrid-material-demo-forked-60787?file=/demo.js

您可以在

【讨论】：

试过 export default index = () => { 得到以下错误：ReferenceError: index is not defined。尝试了第二个选项，仍然得到无效的钩子调用
@AlisonQiu 我已经更新了我的答案，我已经为你提供了一个有效的 Codesandbox。
除了添加 Codesandbox 之外，您能否告诉我您对原始建议（代码方面）的更改？
@AlisonQiu 我刚刚删除了“Index =”