duplicate react installed which causes invalid hook error

jink-e commented 4 years ago

Describe the bug

react component

bit export local-scope a component with the third-party npm packages (styled-components)
bit import local-scope/component
- when yarn install local packages
duplicate react installed which causes invalid hook error

Steps to Reproduce

write a component use styled-components


// src/components/TestButton
import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div color: red; text-align: center; vertical-align: middle; line-height: 50px; width: 100px; border: 1px solid blue; border-radius: 10px; ;

const TestButton = props => (

{props.children}

);

export default TestButton;

2. bit add src/components/TestButton && bit build
3. bit tag --all
4. bit export local-scope
5. create a new app `create-react-app new-app && cd new-app` 
6. bit import local-scope/test-button
7. use imported bit component
```js
// src/App.js
import React from 'react';
import TestButton from '@bit/boz-scope.test';
import './App.css';

function App() {
  return (
    <>
      <TestButton>Hello</TestButton>
    </>
  );
}

export default App;

yarn && yarn start

invalid hook error occurs


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:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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.
remove ./components/test-button/node_modules/react
yarn && yarn start
error disappear
Expected Behavior

no invalid hook error appear no need of manually removing react in components/test-button/node_modules

Screenshots, exceptions and logs

If applicable, add screenshots, exceptions, and logs to help explain your problem.

Specifications

Bit version: 14.7.6
Node version: v13.11.0
yarn version: 1.22.4
Platform: macOS Catalina 10.15.4
Compiler / Tester (include version): bit.envs/compilers/react@1.0.16

Additional context

Add any other context about the problem here.

itaymendel commented 4 years ago

Hi,

I assume that if you run bit show on the component you'll see that both React and Styled-components are set as dependencies. When setting components for reusability you should set some dependencies to be peerDependencies instead. In React, these should be react and react-dom. Additionally, styled-components needs to be a singleton in the project, so in your case, you'd want to set it as a peer as well.

You can read more about it in Bit's guidelines for React. You can also use overrides to configure it for components.

jink-e commented 4 years ago

Thank you so much! @itaymendel This can be solved by adding peerDependencies

// components/test-button/package.json
"peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

Appreciate agin :)

teambit / envs