Invalid hook call after bob build

[apa47]

Context: I'm working on a small library that i build using bob build and i consume in my app. I have to mention that i used react-native-bob-builder with default setup, nothing custom. When i use hooks inside a component, the consumer app throws the following error: 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... If i dont use hooks it seems to work as expected.

Versions: "react-native-builder-bob": "^0.17.1", "react": "16.13.1", "react-dom": "16.13.1", "react-native": "~0.63.4",
"react-native-web": "~0.13.12"

This is a simplified example of my component:

import React, { useState } from 'react';
import { Text, View } from 'react-native';

const TestText = () => {
  const [text] = useState('from test lib');
  return (
      <Text>{text}</Text>
  );
};

export default TestText;

If i use useState i get the error. If i remove the useState i don't get it and the component renders.

If i use the component directly in my app, and not imported from the library, it renders as expected.

Any ideas? What am i missing?

[crherman7]

@adrian-parasciuc https://reactjs.org/docs/hooks-state.html please refer to docs. Also look here: https://reactjs.org/warnings/invalid-hook-call-warning.html. Looks like you are not initializing the function to set the actual state, not sure if that would fix your issue tho. If you are not looking to destructure the response hook array then you should use this:

const text = useState('from test lib');
.
.
.
<Text>{text[0]}</Text>

If you are going to destructure the useState hook response you should use it like this:

const [text, setText] = useState('from test lib');

[apa47]

@adrian-parasciuc https://reactjs.org/docs/hooks-state.html please refer to docs. Also look here: https://reactjs.org/warnings/invalid-hook-call-warning.html. Looks like you are not initializing the function to set the actual state, not sure if that would fix your issue tho. If you are not looking to destructure the response hook array then you should use this:

const text = useState('from test lib');
.
.
.
<Text>{text[0]}</Text>

@crherman7 I oversimplified the example to have a hook usage, although useless. Destructuring and only taking the first element is not an issue.

[crherman7]

@adrian-parasciuc okay cool, I'm interested to find the real issue - so I will dig deeper today at some point!

[crherman7]

@adrian-parasciuc any reason why you have react-dom as a dependency in react-native project. I typically associate that with a react project, not necessarily a react-native project. Idk if that would cause unnecessary collisions. Just a thought while I dig deeper.

[apa47]

@adrian-parasciuc any reason why you have react-dom as a dependency in react-native project. I typically associate that with a react project, not necessarily a react-native project. Idk if that would cause unnecessary collisions. Just a thought while I dig deeper.

@crherman7 The reason is that i also run expo web. I've updated the dependencies with "react-native-web": "~0.13.12"

[crherman7]

@apa47 ahh fair enough :)

[shamilovtim]

You're using hooks in the *.js/ts of the module? That's not a React component AFAIK. Put your hooks in your React app, don't put them in the plugin's code.

[apa47]

You're using hooks in the *.js/ts of the module? That's not a React component AFAIK. Put your hooks in your React app, don't put them in the plugin's code.

It’s a functional component. As i said in the initial post: if i copy paste TestText and use it in the consumer app it works as expected but if i keep it in the library build it with builder bob and use it in the consumer app it throws the error.

[sinewave440hz]

I'm also experiencing this. In the example app built by bob, I can use my component without issue. But installing it in another app results in this error. My component also uses hooks. I've been through the trouble shooting guide, it's nothing there as far as I can ascertain: https://reactjs.org/warnings/invalid-hook-call-warning.html. Suggestions would be extremely welcome!!

[satya164]

You're probably adding React as a dependency. It should only be a peer dependency.

[sinewave440hz]

I wish it was that, but no. React is a peer dependency in my bob-generated project.

[sergeymild]

I have the same problem, just create simple library with Native view (to use as a component) and create simple hook in library, after connect that library to project (not to an example) and import that hook, after try to use it in component.tsx and React throws that error.

[carloswbarros]

I have the same problem, with a fresh created library the hooks don't work. I have spent 2 days on this and I can't seem to find the solution. I just create a library with a command npx create-react-native-library react-native-awesome-module and choose Javascript & Native view (to use as a component) and I create a component with a setState hook for example and run the app and I get that error.

[carloswbarros]

After days with this issue I finally found the problem. I created a pull request #212

For me the problem was using a command line that uses lower case paths (like cmder), after using the windows command line it started working. I fixed the issue by creating the metro blacklist regex with case insensitive.

Every template or tutorial online seems to have this problem, I'm happy to finally have found the solution

[zrg-team]

can everyone merged it ?

[zrg-team]

@carloswbarros ca can you explain how to fix ?

[carloswbarros]

@carloswbarros ca can you explain how to fix ?

This might not be the same problem that you have because this error can mean a lot of things, but for me it was and if it is the same problem for you, you have 2 options:

A: Use a different command line, powershell seems to work very well. B: Check the pull request #212 and do the same thing in the metro.config.js.

[satya164]

If this is still an issue, please provide a repro to debug the issue.