Creating react/typescript library resulting in Invalid hook call error

I am building a react/typescript library using typescript and rollup to export it
this is my package.json for library

     {
      "name": "infosysta-typescript-core",
      "version": "1.0.0",
      "description": "This will the infosysta's core library for typescript",
      "scripts": {
        "build_tsc": "tsc",
        "build_publish": "tsc -p .",
        "publish": "npm publish",
        "start": "tsc && nodemon build/index.js",
        "rollup": "rollup -c"
      },
      "keywords": [],
      "author": "Infosysta",
      "license": "ISC",
      "devDependencies": {
        "@atlaskit/adf-schema": "^25.1.1",
        "@atlaskit/button": "^13.4.2",
        "@atlaskit/editor-json-transformer": "^8.7.6",
        "@atlaskit/editor-wikimarkup-transformer": "^5.7.1",
        "@atlaskit/form": "^7.4.1",
        "@atlaskit/icon": "^20.1.2",
        "@atlaskit/mention": "^21.0.9",
        "@atlaskit/section-message": "^6.3.9",
        "@atlaskit/spinner": "^14.0.0",
        "@atlaskit/textfield": "^3.1.13",
        "@atlaskit/tooltip": "^9.0.0",
        "@babel/core": "^7.16.0",
        "@babel/preset-env": "^7.16.4",
        "@babel/preset-react": "^7.16.0",
        "@babel/preset-typescript": "^7.16.0",
        "@fluentui/react": "^7.137.1",
        "@mdx-js/react": "^2.1.2",
        "@rollup/plugin-commonjs": "^21.0.1",
        "@rollup/plugin-image": "^3.0.2",
        "@rollup/plugin-json": "^6.0.0",
        "@rollup/plugin-node-resolve": "^13.0.6",
        "@rollup/plugin-typescript": "^8.3.0",
        "@tanker/file-ponyfill": "^2.22.0",
        "@types/lodash-es": "^4.17.6",
       
        
        "@types/validator": "^13.7.11",
        "adf-builder": "^3.3.0",
        "axios": "^0.21.1",
        "deepmerge": "^4.3.0",
        "lodash-es": "^4.17.21",
        "moment": "^2.29.1",
        "nodemon": "^2.0.19",
        "prosemirror-model": "^1.19.0",   
       
        "rollup": "^2.60.0",
        "rollup-plugin-copy-assets": "^2.0.3",
        "rollup-plugin-dts": "^4.0.1",
        "rollup-plugin-postcss": "^4.0.1",
        "socket.io": "^2.4.1",
        "socket.io-client": "^2.3.0",
        "typescript": "^4.7.4",
        "validator": "^13.6.0",
        "react-router-dom": "^5.2.0",
        "@types/react-router-dom": "^5.3.3"
      },
      "peerDependencies": {
    "react": "^16.14.0",
    "react-dom": "^16.10.2",
    "@types/react": "^16.8.22",
    "@types/react-dom": "^16.8.4"
  },
      "main": "dist/cjs/index.js",
      "module": "dist/esm/index.js",
      "files": [
        "dist"
      ],
      "types": "dist/index.d.ts"
    }

the following is the package.json for the project creating the error ( note that there is no other reference for react in package.json except the ones in the peerDependecies)

 "peerDependencies": {
"@types/react": "^16.8.22",
"@types/react-dom": "^16.8.4",
"react": "^16.14.0",
"react-dom": "^16.10.2"
 },

The error is the following

Uncaught 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:

in the library package the only hook call i am using is this

    import * as React from "react";
import { useEffect } from 'react';
import { HelperClass } from "../common/kits/commonHelpers/HelperClass";
import { Utils } from "../common/kits/commonHelpers/Utils";
import "../common/css/Login.css";
import config from "../common/data/config/config.json"
let lang :any= config.otj.defaultLanguage;
export const JiraLogo : React.FC<{}> = ({}) => {
 
  const imageStyle = {
    maxWidth: "200px"
  };
  useEffect(() => {
    const userURL = Utils.getUserURL()
    lang = HelperClass.getProperty("lang-" + userURL)
  });
  return (
    <div>
      <div className="container-div">
        <img style={imageStyle} src="../common/data/assets/logo.png" alt="Connect to Jira" />
      </div>
      <div className="container-div">
        <p>{Utils.getUserLanguage("USE_OTJ_TO_CREATE_AND_UPDATE_ISSUES", lang)}</p>
      </div>
    </div>
  );
};

the full error below

After testing i tried the following

I added the following class and I only exported it in my library as follow

import * as React from 'react';
import { PrimaryButton, Stack } from '@fluentui/react';
import { DefaultPalette } from '@fluentui/react/lib/Styling';
import "../common/css/UtilsStyle.css"

const stackStyles = {
    root: {
        background: DefaultPalette.whiteTranslucent40,
        padding: 0
    },
};
const sectionStackTokens = { childrenGap: 10 };
const headingStackTokens = { childrenGap: 20 };

const LoginFooter = ({ ShowCustomerButton, CustomerButtonClick, disabled, clicked }: any) => {

    return (
        <div>
            Hello footer
            {ShowCustomerButton} {CustomerButtonClick} {disabled} {clicked}
        </div>
       

    )
}
export default LoginFooter

This will work in the host application, Although if I edit this functional component and add in the return method any external component for example the following

    import * as React from 'react';
import { PrimaryButton, Stack } from '@fluentui/react';
import { DefaultPalette } from '@fluentui/react/lib/Styling';
import "../common/css/UtilsStyle.css"

const stackStyles = {
    root: {
        background: DefaultPalette.whiteTranslucent40,
        padding: 0
    },
};
const sectionStackTokens = { childrenGap: 10 };
const headingStackTokens = { childrenGap: 20 };

const LoginFooter = ({ ShowCustomerButton, CustomerButtonClick, disabled, clicked }: any) => {

    return (        
        <Stack className="footer" styles={stackStyles} tokens={sectionStackTokens}>
            <Stack horizontal disableShrink horizontalAlign="space-between" tokens={headingStackTokens}>
                <Stack grow>
                    <Stack verticalAlign="start" >
                        <span></span>
                    </Stack>
                </Stack>
                <Stack grow>
                    <Stack horizontalAlign="end" verticalAlign="end">
                        <Stack horizontal tokens={headingStackTokens}>
                            {
                                ShowCustomerButton && (
                                    <PrimaryButton onClick={CustomerButtonClick} text="Continue as customer" allowDisabledFocus />
                                )
                            }
                            <PrimaryButton disabled={disabled} onClick={clicked} text="Continue" allowDisabledFocus />
                        </Stack>
                    </Stack>
                </Stack>
            </Stack>
        </Stack>

    )
}
export default LoginFooter

This will make the error occurred

I fixed my issue by adding this to my rollup.config.js file

  output:[....],
  plugin:[....],
  external: ['react', 'react-dom'] // this line here

and in my package.json react and react-dom should exist in the peerDependecies section

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

It's likely one of these is a React Hook and you are calling it from within useEffect which would trigger this error.

const userURL = Utils.getUserURL()

lang = HelperClass.getProperty("lang-" + userURL)

If those are hooks, they must be imported at the top of the JiraLogo component as such:

import * as React from "react";
import { useEffect } from 'react';
import { HelperClass } from "../common/kits/commonHelpers/HelperClass";
import { Utils } from "../common/kits/commonHelpers/Utils";
import "../common/css/Login.css";
import config from "../common/data/config/config.json"
export const JiraLogo : React.FC = () => {
const userURL = Utils.getUserURL();
let lang: any = HelperClass.getProperty("lang-" + userURL);
const imageStyle = {
maxWidth: "200px"
};
return (
<div>
<div className="container-div">
<img style={imageStyle} src="../common/data/assets/logo.png" alt="Connect to Jira" />
</div>
<div className="container-div">
<p>{Utils.getUserLanguage("USE_OTJ_TO_CREATE_AND_UPDATE_ISSUES", lang)}</p>
</div>
</div>
);
};

There are other triggers for this error but looking at your code that seems most likely.

I hope this helps!