Create react functional component with hook and publish him in npm package

Question

I try to create own npm pack. I created and published my component, it is working, but when I add UseEffect in my component I have errors. What is goin on?

import React, { FC, useEffect, useState  } from 'react';
import './Button.scss';

export interface ButtonProps {
  children: any;
  styles?: Array<string>;
}

const Button: FC<ButtonProps> = (
  {
    children,
    styles,
    ...props
  }) => {

  const [active, setActive] = useState(null);
  const root_styles = ['pef_button'];
  
  useEffect(()=>{
    console.log('JK:DAHJS:JDKHA:SKJhd');
    
  },[])

  if(styles){
    for (let i = 0; i < styles.length; i++){
      root_styles.push(styles[i]);
    }
  }
    
  return(
    <button {...props} className={root_styles.join(' ')} >
      {children}
    </button>
  );
};

export default Button;

I do import this component in my app and have error

import React, {useContext, useState, useEffect} from 'react';

import {Button, Input} from 'My[![enter image description here][1]][1]-react-library'

const MainPage: React.FunctionComponent = () => {


  return (
    <div>
      <div>
        <Button   >
          zxc
        </Button>
      </div>
    </div>
  );
};
    
export default MainPage;

Maybe I should use component classes instead of functional-components

Answer 1

What are you using to package it? I had the same issue while using Rollup. I solved it by adding react and react-dom to external in rollup.config.js.

export default {
    ...,
    external: [
        'react',
        'react-dom',
    ]
}