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:

Hi all, I am new to react and I am trying to create a react library of components and I came across this problem because one of the components I am creating uses REACT HOOKS.

Disclaimer: this is my first time creating an issue, so please bear with me.

So I am trying to create an accordion component which toggles between these classes accordion__item--open and accordion__item to open and close.

package.json

{
  "name": "react-lib",
  "version": "0.3.0",
  "description": "A simple UI library of react components",
  "main": "dist/index.js",
  "publishConfig": {
    "registry": ""
  },
  "scripts": {
    "login": "",
    "build": "webpack --mode=production",
    "develop": "webpack --mode=development --watch"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "",
  "dependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "eslint": "^5.15.1",
    "eslint-loader": "^2.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.6.0"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports =  {

  mode: 'development',
  optimization: {
    minimize: true,
  },
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js',
    library: '',
    libraryTarget: 'commonjs'
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/react']
        }
      }
    ]
  } 
};

This is the accordion container:

import React from 'react'; 

function Accordion({ children }) {

 return (
   <div className="accordion">
     { children }
   </div>
 ); 

}

export default Accordion;

This is the accordion item that will live inside the container:

import React, { useState } from 'react'; 

function AccordionItem({header, content}) { 

const [ isActive, toggleActive ] = useState(false);
  
return (
    <div className={ `accordion__item ${ isActive ? 'accordion__item--open' : '' }` }>

      <button
        className="accordion__item-header"
        onClick={ () => isActive ? toggleActive(false) : toggleActive(true) }
      >
       { header }
       <svg className="icon icon--debit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
         <path className="icon__path" d="M22.37,22.33V2.67a2.63,2.63,0,0,1,5.26,0V47.24a2.63,2.63,0,0,1-5.26.09V27.58H2.71a2.63,2.63,0,0,1,0-5.25Zm11.92,5.25a2.63,2.63,0,0,1,0-5.25h13a2.63,2.63,0,0,1,0,5.25Z">
         </path>
       </svg>
     </button>

     <div className="accordion__item-content">
       { children }
     </div>

   </div>
 )

};

export default AccordionItem;

Now inside of a create-react-app I import these components

My library and the create-react-app are relative to each other and I am using npm link

import React from 'react'; 

import {AccordionItem} from 'react-lib'
import {Accordion} from 'react-lib';

function App ({props}) {

  return (
    
      <Accordion>
        <AccordionItem header={"Hello"} content={"World"}/>
      </Accordion> 
  )

}

export default App;

I have followed all of these instructions and I still get the same error.

Current behavior?

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.

Steps to reproduce

• clone https://github.com/sethandleah/react-lib
• clone https://github.com/sethandleah/myapp
• cd react-lib
• npm install
• npm link
• cd ../myapp
• npm i
• npm link react-lib
• npm start

Expected behavior

• It should show a button with a “plus” svg sign and the words “Hello” and “World” respectively
• Open devtools and go to elements
• When clicking on the button the class accordion_item--open should toggle

To see the above, do the following:

• Uncomment these lines at myapp/src/App.js

import Accordion  from './Accordion';
import AccordionItem from './AccordionItem';

• The comment out these line, alse at myapp/src/App.js:

import { Accordion } from 'react-lib';
import { AccordionItem } from 'react-lib';

Versions of React, Browser / OS are affected by this issue:

• React and React-Dom: both are ^16.8.6 on both react-lib and the myapp
• Browser: Brave Version 0.61.52 Chromium: 73.0.3683.86 (Official Build) (64-bit)
• OS: MacOS High Siera Version 10.13.6 (17G5019)

[gaearon]

My library and the create-react-app are relative to each other and I am using npm link

Did you read this part?

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

It directly addresses the link workflow:

[revskill10]

This happens if i use hook inside a HOC.

const HOC = Component => {
  return (props) => {
    const [val] = useState();
    return <div>{val}</div>
  }
}