Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. #15742

Closed
ir-fuel opened this issue May 27, 2019 · 9 comments
Closed

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. #15742

ir-fuel opened this issue May 27, 2019 · 9 comments
Labels
Resolution: Stale Automatically closed due to inactivity

Comments

@ir-fuel
Copy link

ir-fuel commented May 27, 2019

Do you want to request a feature or report a bug?
Bug

What is the current behavior?

I am getting this error:

Invariant Violation: 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. at invariant (webpack:///./node_modules/react/cjs/react.development.js?:88:15) at resolveDispatcher (webpack:///./node_modules/react/cjs/react.development.js?:1436:28) at Object.useRef (webpack:///./node_modules/react/cjs/react.development.js?:1471:20) at Toolbar (webpack:///./client/index.jsx?:10:48) at renderWithHooks (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:12938:18) at mountIndeterminateComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15020:13) at beginWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15625:16) at performUnitOfWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19312:12) at workLoop (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19352:24) at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:149:14)

Here is an example project that shows the problem:

https://github.com/ir-fuel/material-test

import ReactDOM from 'react-dom'
import React from 'react'

function Toolbar() {
  React.useRef()
  return <span>Test</span>
}

ReactDOM.render(
  <Toolbar/>,
  document.querySelector(".application")
);

What is the expected behavior?

It should not give an error

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.8.6
Chrome Version 74.0.3729.157 (Official Build) (64-bit)
@kunukn
Copy link
Contributor

kunukn commented May 28, 2019

I could not reproduce it. It ran fine for me.
Your github repo didn't have a npm start command but a webpack build.

I ran yarn development and added a index.html file in dist folder with following content

<html>
<head>  
    <title>Document</title>
</head>
<body>
    <div class="application"></div>
    <script src="./bundle.js"></script>
</body>
</html>

And it rendered Test in the browser as expected.

If you haven't, you could also try to solve it using by following this document.
https://reactjs.org/warnings/invalid-hook-call-warning.html

@ir-fuel
Copy link
Author

ir-fuel commented May 28, 2019 •
edited
Loading

Archive.zip

Here is my webpack output. You can just put it in a folder somewhere and have a web server point at it (MAMP for instance). If you open the url it will show the error.

Sorry for forgetting the instructions. I do npm run development and open my webbrowser at localhost:8080

No need to create the dist folder or to copy an index.html file there if you run webpack.

As you can see, I am not the only one that managed to have this issue with my code:

mui/material-ui#15832 (comment)

@codeshaker
Copy link

Can you share your package.json?

@ir-fuel
Copy link
Author

ir-fuel commented Jun 4, 2019

My package.json and all other files are in the github repo I put in my first post.

@ir-fuel
Copy link
Author

ir-fuel commented Jun 9, 2019

So, what causes this?

@ir-fuel
Copy link
Author

ir-fuel commented Jun 10, 2019 

{
  "name": "Test",
  "version": "1.0.0",
  "description": "TEST",
  "main": "index.html",
  "scripts": {
    "development": "webpack --devtool eval --progress --colors --debug --mode development"
  },
  "keywords": [],
  "author": "---",
  "license": "---",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.32.1",
    "webpack-cli": "^3.3.2"
  }
}

@piriej
Copy link

piriej commented Jun 29, 2019

@ir-fuel , I was able to resolve a similar issue in my code base by, deleting my node_modules folder, cleaning the npm cache (npm cache clean -f) and removing my package-lock.json file. Then performing an npm install. Hope that helps you also.

@Boosmith Boosmith mentioned this issue Aug 4, 2019
Open
@facebook facebook deleted a comment from tangqin0206 Sep 4, 2019
@facebook facebook deleted a comment from 526117 Sep 4, 2019
@facebook facebook deleted a comment from 526117 Sep 4, 2019
@stale
Copy link

stale bot commented Jan 10, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Jan 10, 2020
@stale
Copy link

stale bot commented Jan 17, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

@stale stale bot closed this as completed Jan 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Resolution: Stale Automatically closed due to inactivity
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ir-fuel @kunukn @codeshaker @piriej