Creating react/typescript library resulting in Invalid hook call error

huangapple
go评论98阅读模式
英文:

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";
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 (

Creating react/typescript library resulting in Invalid hook call error

{Utils.getUserLanguage("USE_OTJ_TO_CREATE_AND_UPDATE_ISSUES", lang)}

};

the full error below Creating react/typescript library resulting in Invalid hook call error

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 (

Hello footer
{ShowCustomerButton} {CustomerButtonClick} {disabled} {clicked}

)
}
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={

英文:

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

  1.      {
  2.       &quot;name&quot;: &quot;infosysta-typescript-core&quot;,
  3.       &quot;version&quot;: &quot;1.0.0&quot;,
  4.       &quot;description&quot;: &quot;This will the infosysta&#39;s core library for typescript&quot;,
  5.       &quot;scripts&quot;: {
  6.         &quot;build_tsc&quot;: &quot;tsc&quot;,
  7.         &quot;build_publish&quot;: &quot;tsc -p .&quot;,
  8.         &quot;publish&quot;: &quot;npm publish&quot;,
  9.         &quot;start&quot;: &quot;tsc &amp;&amp; nodemon build/index.js&quot;,
  10.         &quot;rollup&quot;: &quot;rollup -c&quot;
  11.       },
  12.       &quot;keywords&quot;: [],
  13.       &quot;author&quot;: &quot;Infosysta&quot;,
  14.       &quot;license&quot;: &quot;ISC&quot;,
  15.       &quot;devDependencies&quot;: {
  16.         &quot;@atlaskit/adf-schema&quot;: &quot;^25.1.1&quot;,
  17.         &quot;@atlaskit/button&quot;: &quot;^13.4.2&quot;,
  18.         &quot;@atlaskit/editor-json-transformer&quot;: &quot;^8.7.6&quot;,
  19.         &quot;@atlaskit/editor-wikimarkup-transformer&quot;: &quot;^5.7.1&quot;,
  20.         &quot;@atlaskit/form&quot;: &quot;^7.4.1&quot;,
  21.         &quot;@atlaskit/icon&quot;: &quot;^20.1.2&quot;,
  22.         &quot;@atlaskit/mention&quot;: &quot;^21.0.9&quot;,
  23.         &quot;@atlaskit/section-message&quot;: &quot;^6.3.9&quot;,
  24.         &quot;@atlaskit/spinner&quot;: &quot;^14.0.0&quot;,
  25.         &quot;@atlaskit/textfield&quot;: &quot;^3.1.13&quot;,
  26.         &quot;@atlaskit/tooltip&quot;: &quot;^9.0.0&quot;,
  27.         &quot;@babel/core&quot;: &quot;^7.16.0&quot;,
  28.         &quot;@babel/preset-env&quot;: &quot;^7.16.4&quot;,
  29.         &quot;@babel/preset-react&quot;: &quot;^7.16.0&quot;,
  30.         &quot;@babel/preset-typescript&quot;: &quot;^7.16.0&quot;,
  31.         &quot;@fluentui/react&quot;: &quot;^7.137.1&quot;,
  32.         &quot;@mdx-js/react&quot;: &quot;^2.1.2&quot;,
  33.         &quot;@rollup/plugin-commonjs&quot;: &quot;^21.0.1&quot;,
  34.         &quot;@rollup/plugin-image&quot;: &quot;^3.0.2&quot;,
  35.         &quot;@rollup/plugin-json&quot;: &quot;^6.0.0&quot;,
  36.         &quot;@rollup/plugin-node-resolve&quot;: &quot;^13.0.6&quot;,
  37.         &quot;@rollup/plugin-typescript&quot;: &quot;^8.3.0&quot;,
  38.         &quot;@tanker/file-ponyfill&quot;: &quot;^2.22.0&quot;,
  39.         &quot;@types/lodash-es&quot;: &quot;^4.17.6&quot;,
  40.        
  41.         
  42.         &quot;@types/validator&quot;: &quot;^13.7.11&quot;,
  43.         &quot;adf-builder&quot;: &quot;^3.3.0&quot;,
  44.         &quot;axios&quot;: &quot;^0.21.1&quot;,
  45.         &quot;deepmerge&quot;: &quot;^4.3.0&quot;,
  46.         &quot;lodash-es&quot;: &quot;^4.17.21&quot;,
  47.         &quot;moment&quot;: &quot;^2.29.1&quot;,
  48.         &quot;nodemon&quot;: &quot;^2.0.19&quot;,
  49.         &quot;prosemirror-model&quot;: &quot;^1.19.0&quot;,   
  50.        
  51.         &quot;rollup&quot;: &quot;^2.60.0&quot;,
  52.         &quot;rollup-plugin-copy-assets&quot;: &quot;^2.0.3&quot;,
  53.         &quot;rollup-plugin-dts&quot;: &quot;^4.0.1&quot;,
  54.         &quot;rollup-plugin-postcss&quot;: &quot;^4.0.1&quot;,
  55.         &quot;socket.io&quot;: &quot;^2.4.1&quot;,
  56.         &quot;socket.io-client&quot;: &quot;^2.3.0&quot;,
  57.         &quot;typescript&quot;: &quot;^4.7.4&quot;,
  58.         &quot;validator&quot;: &quot;^13.6.0&quot;,
  59.         &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
  60.         &quot;@types/react-router-dom&quot;: &quot;^5.3.3&quot;
  61.       },
  62.       &quot;peerDependencies&quot;: {
  63.     &quot;react&quot;: &quot;^16.14.0&quot;,
  64.     &quot;react-dom&quot;: &quot;^16.10.2&quot;,
  65.     &quot;@types/react&quot;: &quot;^16.8.22&quot;,
  66.     &quot;@types/react-dom&quot;: &quot;^16.8.4&quot;
  67.   },
  68.       &quot;main&quot;: &quot;dist/cjs/index.js&quot;,
  69.       &quot;module&quot;: &quot;dist/esm/index.js&quot;,
  70.       &quot;files&quot;: [
  71.         &quot;dist&quot;
  72.       ],
  73.       &quot;types&quot;: &quot;dist/index.d.ts&quot;
  74.     }

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)

  1.  &quot;peerDependencies&quot;: {
  2. &quot;@types/react&quot;: &quot;^16.8.22&quot;,
  3. &quot;@types/react-dom&quot;: &quot;^16.8.4&quot;,
  4. &quot;react&quot;: &quot;^16.14.0&quot;,
  5. &quot;react-dom&quot;: &quot;^16.10.2&quot;
  6.  },

The error is the following

  1. 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

  1.     import * as React from &quot;react&quot;;
  2. import { useEffect } from &#39;react&#39;;
  3. import { HelperClass } from &quot;../common/kits/commonHelpers/HelperClass&quot;;
  4. import { Utils } from &quot;../common/kits/commonHelpers/Utils&quot;;
  5. import &quot;../common/css/Login.css&quot;;
  6. import config from &quot;../common/data/config/config.json&quot;
  7. let lang :any= config.otj.defaultLanguage;
  8. export const JiraLogo : React.FC&lt;{}&gt; = ({}) =&gt; {
  9.  
  10.   const imageStyle = {
  11.     maxWidth: &quot;200px&quot;
  12.   };
  13.   useEffect(() =&gt; {
  14.     const userURL = Utils.getUserURL()
  15.     lang = HelperClass.getProperty(&quot;lang-&quot; + userURL)
  16.   });
  17.   return (
  18.     &lt;div&gt;
  19.       &lt;div className=&quot;container-div&quot;&gt;
  20.         &lt;img style={imageStyle} src=&quot;../common/data/assets/logo.png&quot; alt=&quot;Connect to Jira&quot; /&gt;
  21.       &lt;/div&gt;
  22.       &lt;div className=&quot;container-div&quot;&gt;
  23.         &lt;p&gt;{Utils.getUserLanguage(&quot;USE_OTJ_TO_CREATE_AND_UPDATE_ISSUES&quot;, lang)}&lt;/p&gt;
  24.       &lt;/div&gt;
  25.     &lt;/div&gt;
  26.   );
  27. };

the full error below
Creating react/typescript library resulting in Invalid hook call error

After testing i tried the following

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

  1. import * as React from &#39;react&#39;;
  2. import { PrimaryButton, Stack } from &#39;@fluentui/react&#39;;
  3. import { DefaultPalette } from &#39;@fluentui/react/lib/Styling&#39;;
  4. import &quot;../common/css/UtilsStyle.css&quot;
  6. const stackStyles = {
  7.     root: {
  8.         background: DefaultPalette.whiteTranslucent40,
  9.         padding: 0
  10.     },
  11. };
  12. const sectionStackTokens = { childrenGap: 10 };
  13. const headingStackTokens = { childrenGap: 20 };
  15. const LoginFooter = ({ ShowCustomerButton, CustomerButtonClick, disabled, clicked }: any) =&gt; {
  17.     return (
  18.         &lt;div&gt;
  19.             Hello footer
  20.             {ShowCustomerButton} {CustomerButtonClick} {disabled} {clicked}
  21.         &lt;/div&gt;
  22.        
  24.     )
  25. }
  26. 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

  1.     import * as React from &#39;react&#39;;
  2. import { PrimaryButton, Stack } from &#39;@fluentui/react&#39;;
  3. import { DefaultPalette } from &#39;@fluentui/react/lib/Styling&#39;;
  4. import &quot;../common/css/UtilsStyle.css&quot;
  6. const stackStyles = {
  7.     root: {
  8.         background: DefaultPalette.whiteTranslucent40,
  9.         padding: 0
  10.     },
  11. };
  12. const sectionStackTokens = { childrenGap: 10 };
  13. const headingStackTokens = { childrenGap: 20 };
  15. const LoginFooter = ({ ShowCustomerButton, CustomerButtonClick, disabled, clicked }: any) =&gt; {
  17.     return (        
  18.         &lt;Stack className=&quot;footer&quot; styles={stackStyles} tokens={sectionStackTokens}&gt;
  19.             &lt;Stack horizontal disableShrink horizontalAlign=&quot;space-between&quot; tokens={headingStackTokens}&gt;
  20.                 &lt;Stack grow&gt;
  21.                     &lt;Stack verticalAlign=&quot;start&quot; &gt;
  22.                         &lt;span&gt;&lt;/span&gt;
  23.                     &lt;/Stack&gt;
  24.                 &lt;/Stack&gt;
  25.                 &lt;Stack grow&gt;
  26.                     &lt;Stack horizontalAlign=&quot;end&quot; verticalAlign=&quot;end&quot;&gt;
  27.                         &lt;Stack horizontal tokens={headingStackTokens}&gt;
  28.                             {
  29.                                 ShowCustomerButton &amp;&amp; (
  30.                                     &lt;PrimaryButton onClick={CustomerButtonClick} text=&quot;Continue as customer&quot; allowDisabledFocus /&gt;
  31.                                 )
  32.                             }
  33.                             &lt;PrimaryButton disabled={disabled} onClick={clicked} text=&quot;Continue&quot; allowDisabledFocus /&gt;
  34.                         &lt;/Stack&gt;
  35.                     &lt;/Stack&gt;
  36.                 &lt;/Stack&gt;
  37.             &lt;/Stack&gt;
  38.         &lt;/Stack&gt;
  40.     )
  41. }
  42. export default LoginFooter

This will make the error occurred

答案1

得分: 1

以下是翻译好的部分：

我通过将以下内容添加到我的rollup.config.js文件来解决了我的问题：

  1. output:[....],
  2. plugin:[....],
  3. external: ['react', 'react-dom'] // 这一行在这里

而且在我的package.json 文件中，react 和 react-dom 应该存在于 peerDependencies 部分：

  1. "peerDependencies": {
  2.   "react": "^16.14.0",
  3.   "react-dom": "^16.14.0"
  4. }
英文:

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

  1.   output:[....],
  2.   plugin:[....],
  3.   external: [&#39;react&#39;, &#39;react-dom&#39;] // this line here

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

  1.     &quot;peerDependencies&quot;: {
  2.     &quot;react&quot;: &quot;^16.14.0&quot;,
  3.     &quot;react-dom&quot;: &quot;^16.14.0&quot;
  4.    
  5.   },

答案2

得分: 0

以下是代码部分的翻译：

  1. // It's likely one of these is a React Hook and you are calling it from within `useEffect` which would trigger this error.
  2. // 这些中可能有一个是 React Hook，而且你正在在 `useEffect` 中调用它，这可能会触发这个错误。
  4. const userURL = Utils.getUserURL();
  5. // userURL = Utils.getUserURL();
  7. lang = HelperClass.getProperty("lang-" + userURL);
  8. // lang = HelperClass.getProperty("lang-" + userURL);
  10. If those are hooks, they must be imported at the **top** of the **JiraLogo** component as such:
  11. // 如果这些是 Hooks，它们必须像这样在 **JiraLogo** 组件的**顶部**导入：
  13. import * as React from "react";
  14. // import * as React from "react";
  15. import { useEffect } from 'react';
  16. // import { useEffect } from 'react';
  17. import { HelperClass } from "../common/kits/commonHelpers/HelperClass";
  18. // import { HelperClass } from "../common/kits/commonHelpers/HelperClass";
  19. import { Utils } from "../common/kits/commonHelpers/Utils";
  20. // import { Utils } from "../common/kits/commonHelpers/Utils";
  21. import "../common/css/Login.css";
  22. // import "../common/css/Login.css";
  23. import config from "../common/data/config/config.json";
  24. // import config from "../common/data/config/config.json";
  26. export const JiraLogo: React.FC = () => {
  27.   const userURL = Utils.getUserURL();
  28.   // const userURL = Utils.getUserURL();
  29.   let lang: any = HelperClass.getProperty("lang-" + userURL);
  30.   // let lang: any = HelperClass.getProperty("lang-" + userURL);
  32.   const imageStyle = {
  33.     maxWidth: "200px"
  34.   };
  35.   // const imageStyle = {
  36.   //   maxWidth: "200px"
  37.   // };
  39.   return (
  40.     <div>
  41.       <div className="container-div">
  42.         <img style={imageStyle} src="../common/data/assets/logo.png" alt="Connect to Jira" />
  43.       </div>
  44.       <div className="container-div">
  45.         <p>{Utils.getUserLanguage("USE_OTJ_TO_CREATE_AND_UPDATE_ISSUES", lang)}</p>
  46.       </div>
  47.     </div>
  48.   );
  49. };
  50. // return (
  51. //   <div>
  52. //     <div className="container-div">
  53. //       <img style={imageStyle} src="../common/data/assets/logo.png" alt="Connect to Jira" />
  54. //     </div>
  55. //     <div className="container-div">
  56. //       <p>{Utils.getUserLanguage("USE_OTJ_TO_CREATE_AND_UPDATE_ISSUES", lang)}</p>
  57. //     </div>
  58. //   </div>
  59. // );

希望这有所帮助！

英文:

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(&quot;lang-&quot; + userURL)

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

  1. import * as React from &quot;react&quot;;
  2. import { useEffect } from &#39;react&#39;;
  3. import { HelperClass } from &quot;../common/kits/commonHelpers/HelperClass&quot;;
  4. import { Utils } from &quot;../common/kits/commonHelpers/Utils&quot;;
  5. import &quot;../common/css/Login.css&quot;;
  6. import config from &quot;../common/data/config/config.json&quot;
  7. export const JiraLogo : React.FC = () =&gt; {
  8. const userURL = Utils.getUserURL();
  9. let lang: any = HelperClass.getProperty(&quot;lang-&quot; + userURL);
  10. const imageStyle = {
  11. maxWidth: &quot;200px&quot;
  12. };
  13. return (
  14. &lt;div&gt;
  15. &lt;div className=&quot;container-div&quot;&gt;
  16. &lt;img style={imageStyle} src=&quot;../common/data/assets/logo.png&quot; alt=&quot;Connect to Jira&quot; /&gt;
  17. &lt;/div&gt;
  18. &lt;div className=&quot;container-div&quot;&gt;
  19. &lt;p&gt;{Utils.getUserLanguage(&quot;USE_OTJ_TO_CREATE_AND_UPDATE_ISSUES&quot;, lang)}&lt;/p&gt;
  20. &lt;/div&gt;
  21. &lt;/div&gt;
  22. );
  23. };

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

I hope this helps!

huangapple
  • 本文由 发表于 2023年2月8日 22:11:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/75387007.html
  • javascript
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定