bit link --target is causing an error with components which use certain dependencies using react

[demeralde]

Describe the bug

When using bit link --target with a component which has react as a dependency, and running the components in a default Next.js app, it throws the following error:

Unhandled Runtime 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:
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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

It's not because of 1), as react/react-dom have identical versions in both the Next app and the component library.

It's not because of 2), because the components don't break in Bit tests or the Bit development environment.

So it's very likely because of 3). Some components haven't broken with bit link --target, such as @sentry/react:

import React from "react";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

import { Props } from "./types";

const SentryProvider = ({ dsn, children }: Props): React.ReactElement => {
  Sentry.init({
    dsn,
    integrations: [new Integrations.BrowserTracing()],
    tracesSampleRate: 1.0,
  });

  return <>{children}</>;
};

export default SentryProvider;

But others do if a component uses them, like @auth0/auth0-react:

import React from "react";
import { Auth0Provider as BaseAuth0Provider, Auth0ProviderOptions } from "@auth0/auth0-react";

import { Props } from "./types";

const Auth0Provider = ({ children, ...props }: Props): React.ReactElement => {
  const options: Auth0ProviderOptions = {
    ...props,
    redirectUri: typeof window !== "undefined" ? window.location.origin : undefined,
    cacheLocation: "localstorage",
  };
  return <BaseAuth0Provider {...options}>{children}</BaseAuth0Provider>;
};

export default Auth0Provider;

Therefore I strongly suspect it's because these dependencies which break have their own internal copy of React, which is conflicting with Next.js's or the component library's copy of React. I checked and this is the package.json of @auth0/auth0-react:

{
  "devDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
  },
  "peerDependencies": {
    "react": "^16.11.0 || ^17",
    "react-dom": "^16.11.0 || ^17"
  }
}

So it looks like the devDependencies for React here may be conflicting somehow (it shouldn't because it's a dev dependency, so something else may be going on).

Steps to Reproduce

1. Clone the following repo: https://github.com/dspacejs/bit-link-issue
2. cd my-app && yarn install
3. cd ../react-tailwind-env && bit install && bit compile && bit link --target ../my-app
4. cd ../my-app && yarn dev

Expected Behavior

You should receive the described error from the TailwindButton component. It's using the Auth0Provider component example.

Specifications

• Bit version: 0.0.483
• Workspace type: harmony
• Node version: v14.17.1
• yarn version: 1.22.5
• Platform: Ubuntu 20.04.2 LTS

[jjblumenfeld]

We have been experiencing the same issue. Any updates?

[ChristopherHawkes]

Any updates on this? It's hard to develop when we have to push components to the repo to see them working in other projects.

[itaymendel]

this is an issue with how dependencies are resolved when symlinks intorduced. this issue impacts npm link as well.
in a nutshell, react for the component is resolved from the main bit-worksapce, while for your app it gets resolved from the main git-repo.

the only way to resolve it is to bit import the component to the main app you are building.