React-Dropzone - Error: Invalid hook call

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

• I found a bug
• I want to propose a feature

What is the current behavior? The current behaviour while using the latest version of react-dropzone (10.1.5) is the following error on attempting to render the component in a class component using the example in the docs.

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

The above error occurred in the <Dropzone> component: in Dropzone

export class UploadFile extends React.Component {
  render() {
    return (
      <Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
        {({ getRootProps, getInputProps }) => (
          <section>
            <div
              {...getRootProps({
                accept: "application/pdf,image/jpg,image/jpeg,image/png",
                multiple: true
              })}
            >
              <input {...getInputProps()} />
              <p>Drop files here</p>
            </div>
          </section>
        )}
      </Dropzone>
    );
  }

[iamrahulroy]

@rolandjitsu in my project, react & react-dom are at the same version i.e 16.8.6, but I’m still facing the same issue.

[mohantyArpit]

I don’t know if this will help anyone , but in my case i had initially installed the package in my root folder, so the structure was like inside root project there was the Front end project and back-end project all npm , there were no import error even though it was in root.But while rendering it would throw the invalid hook issue. But when i reinstalled it in my FE project it worked fine