- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在构建一个 UI 库来简化跨多个应用程序的维护。这些目前使用 Ant Design。
一切似乎都很顺利...我在 package.json
中都添加了我的对等依赖项和 rollup.config.js
(通过外部),我能够让 Rollup 生成一个 es 和 cjs 二进制文件,它成功地仅导出了我的代码。
但是,当我将其中任何一个导入到我的主机应用程序(Electron 和/或 React,已经使用 antd 没有问题)时,我收到以下错误:
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:
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.
at resolveDispatcher (react.development.js:1476)
at Object.useContext (react.development.js:1484)
at Button (button.js:129)
at renderWithHooks (react-dom.development.js:14985)
at updateForwardRef (react-dom.development.js:17044)
at beginWork (react-dom.development.js:19098)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
resolveDispatcher @ react.development.js:1476
useContext @ react.development.js:1484
Button @ button.js:129
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22779
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ renderer.tsx:129
./src-template/renderer.tsx @ renderer.tsx:150
__webpack_require__ @ bootstrap:789
fn @ bootstrap:100
0 @ renderer.tsx:150
__webpack_require__ @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
react-dom.development.js:20085 The above error occurred in the <Button> component:
at Button (http://localhost:3000/main_window/index.js:48908:30)
at ../../ui-library/dist/index.cjs.js.exports.ComponentA (http://localhost:3000/main_window/index.js:101188:13)
at div
at App (http://localhost:3000/main_window/index.js:204727:30)
我无法理解如何继续......我试图调整我的汇总配置(如下)并将我的所有代码剥离到只有一个测试器组件(antd Button),但我仍然遇到错误。
console.log()
导入对象我可以看到 es 和 cjs 二进制文件都公开了测试器组件,但存在错误。
import { DEFAULT_EXTENSIONS } from '@babel/core'
import babel from '@rollup/plugin-babel'
import typescript from 'rollup-plugin-typescript2'
import commonjs from '@rollup/plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from '@rollup/plugin-node-resolve'
import url from '@rollup/plugin-url'
import svgr from '@svgr/rollup'
import { terser } from 'rollup-plugin-terser'
import pkg from './package.json'
const isDevelopment = process.env.NODE_ENV === 'development' ? true : false;
console.log('EXPECTED EXTERNALS', [
...Object.keys(pkg.dependencies || {}),
...Object.keys(pkg.peerDependencies || {})
])
export default {
input: 'src/index.jsx',
output: [
{
file: `dist/index.es.js`,
format: 'esm',
exports: 'named',
sourcemap: isDevelopment,
},
{
file: `dist/index.cjs.js`,
format: 'cjs',
exports: 'named',
sourcemap: isDevelopment,
}
],
context: 'this',
external: [
...Object.keys(pkg.dependencies || {}),
...Object.keys(pkg.peerDependencies || {})
],
plugins: [
external(),
typescript({
rollupCommonJSResolveHack: true,
clean: true,
tsconfig: './tsconfig.json',
}),
babel({
presets: [
'react-app',
],
extensions: [
...DEFAULT_EXTENSIONS,
'.ts',
'.tsx',
],
plugins: [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"transform-react-remove-prop-types"
],
babelHelpers: 'runtime',
}),
postcss({
extensions: ['.css', '.scss', '.less'],
use: ['sass', ['less', {
lessOptions: {
javascriptEnabled: true
}
}]],
}),
svgr(),
url(),
resolve(),
commonjs(),
terser({ mangle: true }),
],
}
Package.json(组件库)
{
"name": "ui-library",
"version": "0.0.1",
"description": "UI library components",
"main": "index.js",
"scripts": {
"build": "rm -rf dist && mkdir dist && NODE_ENV=production BABEL_ENV=production rollup -c"
},
"peerDependencies": {
"@ant-design/icons": "^4.3.0",
"antd": "^4.9.2",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.12.7",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-react-jsx": "^7.12.10",
"@babel/preset-env": "^7.12.10",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@rollup/plugin-babel": "^5.2.2",
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-typescript": "^8.0.0",
"@rollup/plugin-url": "^6.0.0",
"@svgr/rollup": "^5.5.0",
"@types/node": "^14.14.11",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@typescript-eslint/eslint-plugin": "^4.9.1",
"@typescript-eslint/parser": "^4.9.1",
"babel-loader": "^8.2.2",
"babel-plugin-import": "^1.13.3",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-preset-react-app": "^10.0.0",
"css-loader": "^4.2.1",
"eslint": "^7.15.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-plugin-react": "^7.21.5",
"less-loader": "^7.1.0",
"mini-css-extract-plugin": "^1.3.2",
"react-is": "^17.0.1",
"rollup": "^2.34.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.29.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"typescript": "^4.1.2",
"url-loader": "^4.1.1"
}
}
import React from 'react';
import { Button, Radio } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { SizeType } from 'antd/lib/config-provider/SizeContext';
export interface ButtonProps {
/**
* What background color to use
*/
backgroundColor?: string;
/**
* Button contents
*/
label: string;
/**
* Size (small | large)
*/
size: SizeType;
/**
* Optional click handler
*/
onClick?: () => void;
}
// export const ComponentA = (props: ButtonProps) => (<button type="button" onClick={props.onClick} style={{ backgroundColor: props.backgroundColor}}>{ props.label }</button>);
export const ComponentA = (props: ButtonProps) => (
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
size={props.size || 'middle'}
onClick={props.onClick || null}
>
{props.label || ''}
</Button>
)
更新:添加了汇总插件可视化器输出
最佳答案
如果在您在主项目中链接库的本地版本以加快开发速度时发生此问题。它可能与“React 的重复版本”有关。
https://reactjs.org/warnings/invalid-hook-call-warning.html
This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.
npm link
在/your-app/node_modules/react 中。这应该使 React 的全局链接。 npm link react
在/your-ui-library 中。这应该使库使用应用程序的 React 副本。 关于reactjs - React + Antd + Rollup 组件库 "Error: Invalid hook call. Hooks can only be called inside of the body of a function component",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65259040/
Java 库和 android 库有什么区别,各自有什么优点/缺点? 最佳答案 您可以在 Android 应用程序中包含标准 Java .jar 文件库。它们在 .apk 构建时被翻译成 Dalvik
所以,我现在的代码就像从 Java 层加载库(比如 liba.so),并在内部 liba.so 加载 libb.so。因此,如果我必须将所有库打包到 APK 中并将其安装在没有 root 访问权限的设
我想在我的系统中设置 LEDA 库。 我已经从以下链接下载了 LEDA 库 http://www.algorithmic-solutions.info/free/d5.php Instruct
我想用 autoconf 创建一个共享库。但是,我希望共享库具有“.so”扩展名,而不是以“lib”开头。基本上,我想制作一个加载 dlopen 的插件。 .是否有捷径可寻? 当我尝试使用 autoc
我需要在 Apps 脚本应用程序上修改 PDF。为此,我想使用 JS 库:PDF-LIB 我的代码: eval(UrlFetchApp.fetch("https://unpkg.com/pdf-lib
我正在构建一个使用以下 Boost header 的程序(我使用的是 Microsoft Visual C++ 10), #include #include #include #include
当我通过 cygwin 在 hadoop 上运行此命令时: $bin/hadoop jar hadoop-examples-*.jar grep input output 'dfs[a-z.]+' 我
我已经通过 vcpgk 成功安装了一个 C++ 库,名为:lmdb:x64-windows 我还安装了lmdb通过 Cabal 安装的 Haskell 绑定(bind)包 在尝试测试 lmdb 包时:
我该如何解决这个问题? 我刚刚将 javacv jar 文件复制到我的项目 Lib 文件夹下,但出现了这个错误! 我可以找到这个thread来自谷歌,但不幸的是,由于我国的谷歌限制政策,该页面无法打开
我有一个 Android 库项目 FooLib。 FooLib 引用 Android Context 之类的东西,但不需要任何资源文件(res/ 中的东西)所以我目前将其打包为供我的应用使用的 JAR
我正在开发一个 Android 应用程序(使用 Android Studio),它能够通过手势识别算法了解您正在进行的 Activity 。对于我使用 nickgillian ithub 帐户上可用的
关于从 .NET Framework 项目中引用 .NET Standard 类库的问题有很多类似的问题,其中 netstandard 库中的 NuGet 包依赖项不会流向 netframework
我已经从互联网上下载了 jna-4.2.2.jar,现在想将这个 jar 导入到我的项目中。但是当我试图将这个 jar 导入我的项目时,出现以下错误。 [2016-06-20 09:35:01 - F
我正在尝试通过编译在 Mac 上安装 rsync 3.2.3。但是,我想安装所有功能。为此,它需要一些库,此处 ( https://download.samba.org/pub/rsync/INSTA
进入 Web 开发有点困难。过去 5 年我一直致力于 winforms 工作。所以我正在努力从一种切换到另一种。前段时间,我使用过 JavaScript,但现在还没有大量的 JavaScript 库
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我正在寻找一个用Python编写的与logstash(ruby + java)类似的工具/库。 我的目标是: 从 syslog 中解析所有系统日志 解析应用程序特定日志(apache、django、m
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
我花了几天时间试图寻找用于 JavaPOS 实现的 .jar 库,但我找不到任何可以工作的东西。我找到了很多像这样的文档:http://jpos.1045706.n5.nabble.com/file/
这个问题在这里已经有了答案: Merge multiple .so shared libraries (2 个答案) 关闭 9 年前。 我有我在代码中使用的第三方库的源代码和对象。该库附带有关如何使
我是一名优秀的程序员,十分优秀!