文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用material的无效挂钩调用

问使用material的无效挂钩调用
EN

Stack Overflow用户
提问于 2022-01-26 19:58:42
回答 1查看 472关注 0票数 0

我不像很多其他问题那样有useStyles。为了得到错误，我所做的就是在身体中包含了一个空网格，如下所示：

代码语言：javascript
复制
import Grid from '@mui/material/Grid'; 

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

我试着从package.json中删除"react“和”react“，但没有起作用。一些解决方案建议操纵webpack的档案，但我看不见。这是我的package.json：

代码语言：javascript
复制
{
  "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"
  }
}

这是错误

代码语言：javascript
复制
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)
reactjs
json
material-ui
dependencies
EN

回答 1

Stack Overflow用户

发布于 2022-01-26 21:23:00

这与绑定声明和默认导出概念的本质不同有关，因此您试图同时导出和声明变量！

所以你的代码可能是

代码语言：javascript
复制
import Grid from '@mui/material/Grid'; 

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

或

代码语言：javascript
复制
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

您可以阅读更多关于这个主题的文章。

https://esdiscuss.org/topic/why-is-export-default-var-a-1-invalid-syntax

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70869504

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档