reactjstypescriptcomponentsbitbit.dev

Bit.dev preview not rendering in preview tab, but in overview page

in my (freshly setup) local bit.dev environment, my component wont render under the preview tab section. The preview seems to work in the "Compositions" section in the preview tab.

Button Component Code

import type { ReactNode } from 'react';

export type ButtonProps = {
  /**
   * sets the component children.
   */
  children?: ReactNode;
};

export function Button({ children }: ButtonProps) {
  return (
    <div>
      {children}
    </div>
  );
}

Button Composition Code:

import { Button } from './button.js';

export const BasicButton = () => {
  return (
    <Button>hello world!</Button>
  );
}

Overview Tab: enter image description here

Preview Tab enter image description here

Solution

  • You can now upgrade to the latest bitdev.react/react-env and resolve the preview issue.

    bit envs set components/input/button bitdev.react/react-env@2.0.6

    Also make sure that you are using @teambit/react.mounter v1.0.5 (in case you have it in your dependencies).