Bit: Invalid hook call

[elstr]

Describe the bug

I've defined a functional component that uses hooks. It works locally but when I export it to bit it breaks and I get the Invalid hook call. Hooks can only be called inside of the body of a function component error.

Even when I don't send the prop that uses setState it breaks.

Steps to Reproduce

1. Define functional component
2. Use setState hook
3. Execute

Screenshots, exceptions and logs

const SORT_TYPES = {
  ASCENDING: "ascending",
  DESCENDING: "descending"
};

const FilterBar = ({ search, sort, dropdownFilters }) => {
  const [sortOrder, setSortOrder] = useState(SORT_TYPES.ASCENDING);

  const toggleSortOrder = () => {
    const oppositeSort =
      sortOrder === SORT_TYPES.ASCENDING
        ? SORT_TYPES.DESCENDING
        : SORT_TYPES.ASCENDING;
    setSortOrder(oppositeSort);
    sort[sortOrder].onClick();
  };

....
}

Specifications

• Bit version: 14.4.1
• Node version: v10.15.0
• npm / yarn version: npm 6.11.3 / yarn 1.17.3 (I'm using npm)
• Platform: darwin
• Bit compiler (include version): bit.envs/compilers/[email protected]
• Bit tester (include version): not sure how to see this

[davidfirst]

@elstr , I'm unable to reproduce the issue. Can you add me as a collaborator ([email protected]) so I'll be able to take a look?

[davidfirst]

@elstr , another user reported the same error on Gitter, and in the full error message, there was a hint about multiple React copies running at the same time.
The following link helped the user to fix the issue: https://docs.bit.dev/docs/react-guidelines#add-react-libraries-as-peer-dependencies-with-relaxed-versions.

[marcelpanse]

I have the same problem, but I already use the relaxed version in package.json:

"react": "^16.11.0",
"react-dom": "^16.11.0",

The bit.dev previewer shows the error: https://cl.ly/1605a9c6bada

@davidfirst do you want me to add you?

[jackguoAtJogg]

@marcelpanse You just need to add to the peerDependencies and that should solve the issue.

"peerDependencies": {
    "react": "^16.10.2",
    "react-dom": "^16.10.2"
  },

See doc here: https://docs.bit.dev/docs/react-guidelines#add-react-libraries-as-peer-dependencies-with-relaxed-versions.

[marcelpanse]

Thanks, that solved it!

[H3RSKO]

Ran into the same issue as well. Manually adding the peerDependencies didn't work for me, but adding an override did the trick as mentioned here.

"overrides": {
      "*": {
        "dependencies": {
          "react": "-"
        },
        "peerDependencies": {
          "react": "+"
        }
      }