在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题
我有一个像这样的简单组件。 从'react'导入React，{useState}； 函数 MyComponentWithState(props) { const [值，setValue] = useState(0); 返回 （ 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此，为此我准备了 package.json 和 webpack.config.js，如下所示。 package.json： { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json： const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时，这些配置就像魅力一样，但我的观点是本地测试！ 我想在发布之前测试这个组件/库。为此，我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的，我的组件是功能性的，我也使用了钩子。因此，当我将本地链接的库注入到我的主 ReactJs 项目中时，会遇到此错误， 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次，我的组件也会导入 React！我的意思是在一个项目中两次 React 导入！. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题？我的错误在哪里？ 更新： 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的，但没有成功！意思是，我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js： import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json： { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改，npm link在我的ReactJS（Hooks）项目中真正发挥了作用。 请注意，这只是一个简单的 Rollup 配置来展示我的解决方案，您可以在配置中添加多种内容，例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分（而不是 react-native）内设置 peerDependencies 和 dependencies 包。另外，对于本地开发（当您的包未包含在任何其他 React 项目中并且您想在本地运行它时），您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能，当使用 npm link 时，请使用主应用程序项目和组件项目中的 react。 因此，在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案：https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言，我开发了一些 UI 组件作为包，其中有一个包含 React 应用程序的示例文件夹，用于创建 React 应用程序。 问题是，当我使用 npm i ../ 将包安装到示例应用程序中时，它会将包中的所有文件安装到示例应用程序中，包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项，示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。
在react-testing-library中查询font-awesome元素
在我的渲染方法中我有 使用反应测试库...
参考：https://onlinejudge.org/external/103/10365.pdf 预期输出如下。 假设立方体的尺寸均为相同 1x1x1 英寸 将 9 个立方体包裹在一起，最小的纸张尺寸...
`内部错误。请参考https://code.google.com/p/android/issues java.lang.AssertionError：无法读取/Users/arnavgupta/Library/Application Support/Google/AndroidStudio2023.1/
react-testing-library：无法关闭 MUI Select 的下拉菜单
我有一个 SelectExample.js 从“react”导入 React, { useState }; 从“@mui/material”导入{InputLabel、MenuItem、FormControl、Select、Typography }；> 导出默认fu...
passport-azure-ad / msal.js 和动态作用域
Azure AD v2.0 讨论了动态同意的优点之一 (https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/api-scopes#request-dynamic-scopes- for-增量-c...
Python 多处理 - 如何将 kwargs 传递给函数？
如何使用 Python 的多重处理将字典传递给函数？文档：https://docs.python.org/3.4/library/multiprocessing.html#reference 说要传递字典，但我保留了...
在这种情况下有“distinct-values()”的解决方法吗？
首次海报和 XPath 初学者。我希望你能帮助我解决我遇到的这个 XPath 问题。这是我的文件的简化示例。 第一次海报和 XPath 初学者。我希望你能帮助我解决我遇到的这个 XPath 问题。这是我的文件的简化示例。 <town> <library> <section> <book> <title>ABC </title> </book> <book> <title>DEF </title> </book> </section> <section> <book> <title>ABC </title> </book> <book> <title>DEF </title> </book> </section> </library> <library> <section> <book> <title>ABC </title> </book> <book> <title>DEF </title> </book> </section> <section> <book> <title>ABC </title> </book> <book> <title>DEF </title> </book> <book> <title>GHI </title> </book> </section> </library> </town> 我试图通过 XPath 获得的是具有唯一“标题”的“book”元素，但在两个“library”元素中都是唯一的，而不是在根“town”节点中唯一的。 所以，根据我上面的例子，我期望得到第一个“library”的第一个“ABC”和第一个“DEF”，以及第一个“ABC”，第一个“DEF”和第一个“GHI”第二个“图书馆”。 distinct-values(//library[1]//book | //library[2]//book) 这可行，但我无法使用它，因为我需要使用 XPath 的 CMS 无法识别该功能... //library//book[not(./title = preceding::*/title)] 这不会选择第二个“库”中的第一个“ABC”和第一个“DEF”，我不明白为什么。有没有办法限制“前一个”轴的范围，使其停止在自己的“库”元素处？ 如果有人理解我想要实现的目标，我将非常感谢任何帮助！ 看来您使用的CMS仅支持XPath 1.0。首先游说他们改变这一点 - XPath 1.0 于 2007 年被 2.0 取代，现在应该已经成为历史。 这在单个 XPath 1.0 表达式中很难（也许不可能）完成。 （很难证明任何事情都是不可能的，但是你可以从 XPath 1.0 不是关系完备的前提开始，即它不支持整个一阶谓词演算；特别是它不支持范围变量.) 不幸的是，我不知道您还有哪些其他选择。
在 CentOS 上使用 R 版本 3.2.3 (2015-12-10) 我正在尝试 install.packages('forecast') 我明白了： install.packages('预测') 将软件包安装到“/usr/lib64/R/library”中 （因为“lib”是
将 EdgeList 作为 unordered_set 存储在 Boost Graph Library 上
我正在重现一个科学实验，我需要将图的边集存储为无序集。我正在尝试使用 BGL adjacency_graph，我认为最后一个参数是 hash_...
我试图在我的项目中添加很多动画，但它根本没有显示在浏览器中。我可以检查元素并在 head 标签中查看 BODYMOVING LIBRARY，以及下面的脚本...
Homebrew 无法安装 SDL_image 和 SDL_ttf（macos 版本 10.13.6 High Sierra）
当我尝试使用自制程序安装时 酿造安装sdl2_ttf 这就是我所拥有的 /Users/mac/Library/Logs/Homebrew/ninja/01.python3 的最后 15 行： 运行时： clang++ -MMD -MT build/build...
Oracle Apex 动态操作中的客户端 JavaScript 表达式
我是 JavaScript 新手，我想将客户端条件编写为 JavaScript 表达式，其中包含 IF GLOBAL_ATTRIBUTE_CHAR21 中包含“B”或“-”。和 GLOBAL_ATTRIBUTE_NUMBER14 =“V...
这个 JavaScript 函数（checkValidity）正确吗？ 函数 checkTextBox(textBox) { if (!checkValidity(textBox.getValue())) displayError("错误标题", "错误信息", textBox);
如何使所有 Django 应用程序 locale//django.po 翻译可从 Javascript 访问，以便您可以动态翻译 Javascript 小部件中的文本？ 根据这些文档，您...
我 JavaScript ` 在编写大字符串时非常有用。我的问题是它考虑了 JavaScript 中前面的空白量。所以如果你的字符串在 Java 中是缩进的...
我正在使用 html、css、flask 和 vanilla javascript 以及 ajax 创建一个 Flask 应用程序。 我使用 Javascript 的经验为 0，我编写的所有代码都来自互联网尝试...
如果用户禁用了 JavaScript，有没有办法渲染锚点，但如果用户在 SvelteKit 中启用了 JavaScript，则渲染按钮？
我正在使用 SvelteKit，我正在尝试渲染一个锚元素，为没有 JavaScript 的用户打开登录页面，但如果用户启用了 JavaScript，则渲染一个打开模态的按钮...
我的问题： 大家好。我只是有一个关于使用 JavaScript 更改 CSS 属性的问题。我想使用我在 JavaScript 中编写的方程式来更改 CSS 属性的值。 我的目标是...
Javascript 私有方法：函数表达式与函数声明[重复]
在 JavaScript 中创建（某种）私有方法的常见方法是： 类=函数（arg0，arg1）{ var private_member = 0; var privateMethod = function () { 返回
JavaScript - 如何随机播放字符串中的字符并跳过某些字符（S）
我是一个 javascript 初学者，我遇到了一个问题。我有一个 javascript 的函数来打乱字符串中的字符，这样单词长度和空格就可以像原来那样保留
我在 JavaScript 中有一个对象： var 对象 = { “a”：“测试1”， “b”：“测试2” } 如何检查 test1 是否作为值存在于对象中？
所以客户端javascript中的异步编程是setTimeOut在浏览器API中运行，因此它不会阻塞javascript单线程。由于我们在 Node 中没有浏览器 API，谁...
JavaScript 中的 (/^\s+|\s+$/gm) 是什么意思？
我遇到了这个 JavaScript 函数： 函数 myTrim(x) { 返回 x.replace(/^\s+|\s+$/gm,''); } 我知道这个函数（mytrim（））替换了字符串（x）中的一些字符，但是 /...
如何在 ASP.NET MVC 4 中为 CSP 使用动态随机数
我在 ASP.NET MVC 4 中开发了 MVC 应用程序。我在几个页面中使用了 javascript。一些 javascript 被引用为 @Scripts.Render(“~/Scripts/bootstrap”) @Scripts.Render("~/Sc...
您的任务是将缺少的逻辑添加到transformToObjects() 将数字列表转换为 JavaScript 列表的函数 对象。 对于提供的输入 [1, 2, 3]，transformToObjects()
我是 JavaScript 新手，正在尝试使用它在提交表单之前验证表单。第一个函数“validateYouTube”有效并成功检查 YouTube 代码是否已被我...
我正在阅读这本名为《Eloquent JavaScript》的好书，但我对本示例中“绑定”一词的使用感到困惑： 可以在对象表达式中包含符号属性
出于教育目的，我正在尝试在没有框架的情况下使用 Javascript 中的 CustomElements。我正在尝试为我的 CustomElements 编写一个基类，用于加载模板并设置
如果 URL 中有“ccm_order_by_direction=desc”，Javascript 添加参数
如果 ccm_order_by_direction=desc 在 URL 中，我正在尝试找到一种将 &#filterTop 添加到 URL 末尾的方法。 我认为 JavaScript 是最简单的，但如果有 PHP 的方式可以
我通过 javascript fetch 调用身份验证服务来获取访问令牌。该服务是一个简单的 RESTful 调用。我可以使用 fiddler 看到调用成功（有 200 响应和 j...
我正在阅读 RTK 查询快速入门教程，并在运行时在 javascript 中尝试它，并向我显示了此错误。 相应站点的示例显示了 Typescript 和 Javascript 代码，...
ReferenceError：文档未定义（javascript）
在这里输入图片描述为什么安装完node.js后，运行各种javascript命令的代码后会出现这样的错误，看来不是因为代码错误而是因为n...
我希望电影标题和电影年份以我在 CSS 文件中设置的样式显示。目前，JavaScript 创建的元素仅显示纯黑色文本。 t 的样式...
如何在用 html 和 javascript 制作的 java android 应用程序中启用下载？
我使用html和javascript制作了一个java android应用程序。我在那个 javascript 文件中有一个函数可以下载一些东西。如何在java应用程序中启用它？ 我尝试了一些公开可用的解决方案，但是......
我花了很多时间让它工作，但仍然没有成功...... 问题是：如何在 .js 文件上使用 TSLint？ 为什么？我正在尝试拥有最好的 IDE 来编写许多 JavaScript 脚本，...
使用 Selenium 抓取带有嵌入式 Javascript 的网站
我是 Selenium 新手，正在尝试抓取该网站的内容。但是，该网站似乎基于模板和运行来填充它的 Javascript，我不知道如何访问
我想使用 JavaScript（或 PHP，如果可能）通过页面模板中的超链接触发浏览器的后退功能。有谁知道如何实现这个？
通过Javascript在Firestore中获取按文档ID排序的数据？
通过Javascript在Firestore中获取按文档ID排序的数据 在Andorid中，我可以使用查询转到特定文档 mQuery = docRef.whereEqualTo("名称", 名称) .whereEqualTo("有效...
我正在创建一个 Javascript 记录器，在错误消息中，我还添加了堆栈跟踪，如下所示： 函数 logMessage(logMessage) { 让 stackTrace = new Error().stack; 日志消息。
setInterval 和 requestAnimationFrame 有什么区别？
JavaScript 中的 setInterval 和 requestAnimationFrame 有什么区别以及何时何地使用它们？
如何将 Dart Future 转换为 flutter webview 的 Javascript Promise
我使用了 webview_flutter 来加载我的网站 url，并使用 JavaScriptChannel 进行 javascript 和 dart 之间的双向通信，因为我想要一些从 Android/IOS 平台到 javasc 的本机结果...
从 html 中提取 <h2> 标题文本，其中标题文本可能包含换行符
我有一个 html 文件，其中包含一些 标签，例如 一个<- ' 我有一个 html 文件，其中包含一些 <h2> 标签，例如 a <- '<section id="sec-standard-stoet-geary" class="level2" data-number="9.4"> <h2 data-number="9.4" class="anchored" data-anchor-id="sec-standard-stoet-geary"> <span class="header-section-number">9.4</span> Standardising PISA results</h2>' b <- '</span> <span class="fu">read_parquet</span>(<span class="st">"<folder>PISA_2015_student_subset.parquet"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre> </div> </div> </section><section id="sec-leftjoin" class="level2" data-number="9.3"><h2 data-number="9.3" class="anchored" data-anchor-id="sec-leftjoin"> <span class="header-section-number">9.3</span> Linking data using <code>left_join</code> </h2> <p>' 我可以使用以下方法提取a的标题： str_extract_all(a, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > [1] "Standardising PISA results" 但是在 b 上尝试这个不会返回任何结果： str_extract_all(b, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > character(0) 编辑：从评论来看，这似乎是正则表达式无法解析换行符。 我尝试在正则表达式(?s)中启用单行模式进行解析，但它仍然不起作用 我会在这里使用 html 解析器而不是正则表达式： library(rvest) read_html(a) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.4 Standardising PISA results" read_html(b) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.3 Linking data using left_join" 这是一个辅助函数，它将选择具有跨度的 H2 元素，但会忽略跨度 library(xml2) geth2 <- function(x) { temp <- read_html(x) %>% xml_find_all("//h2[span]") xml_remove(xml_find_all(temp, ".//span")) temp %>% xml_text() %>% stringr::str_squish() } geth2(a) # [1] "Standardising PISA results" geth2(b) # [1] "Linking data using left_join"
我今天刚刚开始学习javascript，我正在尝试弄清楚如何将秒转换为毫秒。 我试图找到一些对我有帮助的东西，但我找到的所有东西都在转换
Angular 中的 JavaScript 函数“未定义”错误
我正在尝试让 Angular 17 项目正常运行。我正在使用 Bootstrap (5)，并尝试让 datePicker 工作。这需要一些 JavaScript 代码，但我无法使用这些代码。我已经关注了...
在 Rails 7 应用程序中使用 bootstrap javascript
我有一个正在运行的 Rails 7 应用程序，它使用 esbuild 作为 JS 捆绑器并导入了 bootstrap。 我正在尝试弄清楚如何访问主“外部”的任何 Bootstrap Javascript 功能
我正在从 API 接收一些数据 { “id”：1， “名称”：“梅尔克”， “内容”： ”{ \“1\”：{ \"主题ID\": 1, \&...
我使用 Javascript 生成的 HTML5 颜色选择器元素来让用户设置另一个元素的颜色。当浏览器执行时，它会绘制一个显示当前所选颜色的矩形。我...
我可以使用 ES6 模板字符串来漂亮地打印 javascript 对象吗？这是来自 React Native 项目，console.log() 输出到 Chrome 调试工具。 我想要的是 const 描述 = '应用程序
我正在尝试使用滑块按钮将输入类型从“文本”更改为“选择”。但是，Javascript 代码没有响应。由于我对 Javascript 比较陌生，我不确定是什么原因......