React component with hooks as npm module

Question

When I try to use React Hooks in module which I use as dependency it's fail. I'm getting a following 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:

But if I use class-based component, it's ok. Why can this happen?

Here is excerpt from my package.json

{
  "main": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/babel src -d dist",
    "prepublish": "npm run build"
  },
  "peerDependencies": {
    "react": "^16.10.2",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "axios": "^0.19.0",
    "jwt-decode": "^2.2.0",
    "qs": "^6.9.0",
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3"
  }
}

Here is the component:

const Test = () => {
  const [state, setState] = React.useState('test')
  return <div>{state}</div>
}

it looks ok, can you share more code? like the way you import Test and use it in the different components. BTW you can't use hooks in a class component — Chiptus, Mar 02 '20 at 14:55
I have the same issue - but when using hook in the function component which is in subfolder of consumer app, there is no problem, but when exported to npm, consumer fails. Maybe it's related to module system or target version? I tried es5 and es2017 both same error. — Jozef Mera, Mar 27 '20 at 06:07
Are you using webpack? In that case what helped me was to set alias to react. There were really more react instances loaded as error states. — Jozef Mera, Mar 27 '20 at 11:28
Jozef, should I set alias in the project or in the module I'm linking? — afkatja, Apr 29 '20 at 12:05

score 1 · Answer 1 · answered Oct 11 '19 at 14:22

1

Maybe what you are trying to use is useState and not useEffect:

const Test = () => {
  const [state, setState] = React.useState('test')
  return (<div>{state}</div>)
 }

answered Oct 11 '19 at 14:22

Girgetto

1,010
9
19

Sorry, yes it’s my typo, but it doesn’t change anything, the result is the same – Twist Oct 11 '19 at 15:15
Could you please share the part of code where Test is rendered? – Girgetto Oct 11 '19 at 15:38
Just simple `export default` and `import Test from 'npm-package-name'`. – Twist Oct 14 '19 at 06:22

score 0 · Answer 2 · answered Dec 01 '20 at 23:44

0

You Cant Create A npm library with hooks you need to convert your function into class component and can be made as a library

answered Dec 01 '20 at 23:44

Rahul Raj

322
3
14

React component with hooks as npm module

2 Answers2