Stack Trace Not Helpful

[TheSecMaven]

Bug report

Admittedly, this is a weird one. But sharing in hopes that someone else doesn't have to suffer for HOURS like I did.
It may make sense to put this somewhere else, and I am not sure its even a "issue" so much as something that could be made easier.

Describe the bug

npm run dev

Then browse to the root page yielded

event - compiled successfully
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/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/Users/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1484:20)
    at StylesProvider (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:64:37)
    at processChild (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/Users/mkeffele/git_repos/website/docudio/node_modules/next/dist/next-server/server/render.js:50:851)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:117:22)
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/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/Users/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1484:20)
    at StylesProvider (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:64:37)
    at processChild (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/Users/mkeffele/git_repos/website/docudio/node_modules/next/dist/next-server/server/render.js:50:851)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:117:22)
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/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/Users/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1484:20)
    at StylesProvider (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:64:37)
    at processChild (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/Users/mkeffele/git_repos/website/docudio/node_modules/next/dist/next-server/server/render.js:50:851)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:117:22)
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/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/Users/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1484:20)
    at StylesProvider (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:64:37)
    at processChild (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/Users/mkeffele/git_repos/website/docudio/node_modules/next/dist/next-server/server/render.js:50:851)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:117:22)
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/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/Users/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1484:20)
    at StylesProvider (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:64:37)
    at processChild (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/Users/mkeffele/git_repos/website/docudio/node_modules/next/dist/next-server/server/render.js:50:851)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:117:22)
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/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/Users/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1484:20)
    at StylesProvider (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:64:37)
    at processChild (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/Users/mkeffele/git_repos/website/docudio/node_modules/next/dist/next-server/server/render.js:50:851)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:117:22)
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/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/Users/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1484:20)
    at StylesProvider (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:64:37)
    at processChild (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/Users/mkeffele/git_repos/website/docudio/node_modules/next/dist/next-server/server/render.js:50:851)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:117:22)

BUT, in my package.json, I checked for @material-ui/core depedencies, was not there.

npm install @material-ui/core 

and restart, resolved that stacktrace I was getting.

A clear and concise description of what the bug is.

To Reproduce

See above.

Expected behavior

Would be good to get a "not found" error message if that is possiible. Something indicating the library isn't there, rather than a stack trace indicating the execution of that code failed.

Screenshots

NA

System information

• OS: macOS
• Browser: chrome

  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "next": "^9.5.5",
    "next-images": "^1.6.0",
    "next-redux-wrapper": "^6.0.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.1",
    "react-scripts": "3.4.3"
  },

Additional context

Add any other context about the problem here.

[TheSecMaven]

[TheSecMaven]

Was able to do the same thing with @material-ui/icons. Had something importing from that but wasnt in package.json, npm install it, then resolved.

Stack trace:

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/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useContext (/Users/mkeffele/git_repos/node_modules/react/cjs/react.development.js:1484:20)
    at useTheme (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/useTheme/useTheme.js:15:30)
    at useStyles (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/makeStyles/makeStyles.js:243:39)
    at Object.WithStyles(ForwardRef(SvgIcon)) [as render] (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/withStyles/withStyles.js:73:21)
    at ReactDOMServerRenderer.render (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3872:44)
    at ReactDOMServerRenderer.read (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/mkeffele/git_repos/website/docudio/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/Users/mkeffele/git_repos/website/docudio/node_modules/next/dist/next-server/server/render.js:50:851)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:117:22)

Again, this just sucks that nextjs couldn't be a little more clear on that issue haha :) That error message doesn't even indicate that the issue is related to @material-ui/icons.

[TheSecMaven]

Hey I just hope someone can find this and not spend as much time as I did :) Would be great to see some enhancements, but not a complainer.

[timneutkens]

The error can probably be improved, not entirely sure how exactly because it comes from React but we'll have a look. It does correctly say where the error happens though if you check the stacktrace it mentions this line:

    at StylesProvider (/Users/mkeffele/git_repos/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:64:37)

So that probably uses a React hook. You can have a look at #9022, there's some issues if you installed multiple versions of React either manually or through dependencies.

[JulianKingman]

Is there a way to get more precise stack traces, or is this the expected DX? I've been chasing obscure bugs for days, and having clear stack traces would clear it up in minutes.