在发布为 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 文件夹并重新安装包再次解决了我的问题。
如何使用 karma-babel-preprocessor 和 PhantomJs 保留行正确的行号？
当我像这样使用 karma-babel-preprocessor 的记录配置时 module.exports = 函数（配置）{ 配置.设置({ 预处理器：{ 'src/**/*.js': ['babel'], '测试/*...
在项目上运行 npm run start:webpack 脚本会产生长达几页的亮黄色警告： [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] 解决“@babel/he...
尝试将我的 nextjs 项目从 babel 迁移到 swc，它会抛出错误“当前未启用对实验性语法‘jsx’的支持”
我正在尝试将我的 NextJS 项目（NextJS 版本 13）从 babel 迁移到 swc。这是我的 bablerc 文件。我不断收到错误“当前未启用对实验性语法‘jsx’的支持...
Jest + TypeScript + Babel 未知选项：.0
我使用 Jest 为我的一些 Fauna DB 操作编写了一个集成测试。我尝试测试的源代码 (fauna.ts) 和测试本身 (fauna.test.ts) 都是 TypeScript 文件。我已经
我的 VS CODE 屏幕截图 代码是正确的，没有错误。我已经安装了最新版本的 Node js，并且没有更新显示 Node Index.js 仍然没有在术语中运行...
我阅读了一些 Docker 和 Node.js 最佳实践文章，例如https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md 或使用
我有这个curl命令，我需要在node js中编写： 卷曲-X POST \ https://image.adobe.io/pie/psdService/renditionCreate \ -H“授权：不记名$令牌”\ -H“x-api-...
Node Sass 版本 9.0.0 与 ^4.0.0 不兼容
我的应用程序中没有安装node-sass或sass包。但我一直收到这个错误 ./src/scss/styles.scss 中的错误（./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plu...
当我尝试在 Visual Code Studio 上运行“ts-node index.ts”等代码时，它显示错误消息
/usr/local/lib/node_modules/ts-node/src/index.ts:857 const DiagnosticText = formatDiagnostics(诊断，diagnosticsHost); 类型错误：formatDiagnostics 不是函数 在 createTSError (/usr/loc...
在arm64 M1 CPU上构建'node-canvas'时出错
我在配备 M1 CPU 的 Mac 上遇到以下错误： 我无法使用“node-canvas”npm 包构建 nodejs 应用程序，因为错误：dlopen(/Users/..../node_modules/canvas/build/Release/canvas.node,
信息：node_modules/node-expose-sspi/dist/sso/client.d.ts:3:8 - 错误 TS1192：模块“http”没有默认导出。 在我安装了node-expose-sspi之后，然后编译了Angular项目（v...
Node Express.js 应用程序在本地运行良好，但在 Docker 中显示“无法获取/”
我在 Node 应用程序中定义了一个 Express.js 服务器，如下所示： const express = require('express') const SignRequest = require('./SignRequest/lambda/index.js') const VerifyResponse = require('./
使用 Node Express 托管网站无法与 Windows 任务计划程序一起使用
我编写了一个简单的网站，并使用 Node Express 托管它。 const express = require('express') 常量应用程序 = Express() app.use(express.static('./')) app.listen(7100, () => { console.log('开始'...
node/nodemon 中是否有对 typescript 的源映射支持？
我有一个用 typescript@2 编写的节点项目。 我的 tsconfig 将 sourceMap 设置为 true 并生成 *.map.js 文件。当我通过 node 或 nodemon 执行转译的 *.js JavaScript 文件时，我...
在使用 Express 的 Node app.js 之后，控制台未显示“服务器启动”
当我在终端上插入 Node app.js 时，我没有在控制台上收到启动服务器：3001 消息。 我的 app.js 文件内容： var createError = require('http-errors'); var express = require('express'); 变量路径 =
在 Docker 中的 Ubuntu 上安装最新版本 Node (v20) 的说明不起作用？
我只是按照说明在 Ubuntu 上的 docker 中安装了最新版本的 Node (v20)，在我的 Dockerfile 中包含以下内容： 来自 --platform=linux/amd64 ubuntu:22.04 运行 apt-get update 运行 apt-get...
为什么ElasticSearch将主分片和副本分片放在同一主机上？
这是添加到现有集群测试中的新主机，触发了重新平衡过程。 两个节点node-5、node-6位于新物理主机中。 对于每个分片，只有一个主分片...
为什么ElasticSearch将主分片和副本分片放在同一主机上？
这是添加到现有集群测试中的新主机，触发了重新平衡过程。 两个节点node-5、node-6位于新主机中。 对于每个分片，只有一个主分片和一个
请帮助我。这是我下面关于discord.js 聊天机器人的代码 const fetch = require("node-fetch"); const {ChannelType} = require("discord.js"); client.on('messageCreate...
假设我们有要转换的 XML： 测试 / 假设我们有要转换的 XML： <?xml version="1.0" encoding="UTF-8"?> <node> <field1>test</field1> <field2>/</field2> <field3>test2</field3> <field4>/<field4> </node> 我想使用 XSLT 1.0 对其进行转换，以便复制整个结构和所有值，除了具有值“/”的元素。 到目前为止，我已经找到了这个，我认为这离我需要的并不遥远，但它还没有工作。 <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:strip-space elements="*"/> <xsl:output indent="yes"/> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="//text()='/'" /> </xsl:transform> 所以我期望的输出是这样的： <?xml version="1.0" encoding="UTF-8"?> <node> <field1>test</field1> <field3>test2</field3> </node> 尝试此操作时，我收到未指定的错误（因为我正在使用免费的在线工具进行转换）。 //text()='/' 不是有效的位置路径。 在任何情况下，您想要删除元素，而不是文本节点 - 所以您应该使用类似的东西： <xsl:template match="*[.='/']" />
我运行了 nvm ls-remote ，列表的末尾如下所示： v14.17.6（LTS：镄） v14.18.0（LTS：镄） v14.18.1（LTS：镄） v14.18.2（LTS：镄） ...
我需要帮助更新 Mac 上的 Node 版本才能使用 Next JS，即使已安装，我仍然收到错误消息
我正在创建一个新的 NextJS 应用程序，它说它需要较新版本的 Node >= v18.17.0 才能与 Next JS 一起使用。我一直在尝试更新，但它说活动节点版本是
自动完成功能不适用于 VSCode 中的 TypeScript + Node
所以如果我编写纯 JS (.js)，它的工作方式如下： 但对于 TypeScript (.ts) 它不起作用：
我正在安装这些 npm 软件包： npm 我表达 body-parser bcrypt cors dotenv gridfs-stream multer multer-gridfs-storage 头盔 morgan jsonwebtoken mongoose 但是，当...
我在这里寻找规范的答案。 如果我有一个如下所示的应用程序： const {getHeapStatistics} = require("v8"); console.log(getHeapStatistics()) 我得到： { 总堆...
在 ec2 中安装节点，Amazon Linux2 错误 glibc >= 2.28
尝试在以下位置安装 npm 和 node： 猫 /etc/os-release 名称=“亚马逊Linux” 版本=“2” ID=“amzn” ID_LIKE="centos rhel fedora" 版本_ID=“2” 漂亮...
所以客户端javascript中的异步编程是setTimeOut在浏览器API中运行，因此它不会阻塞javascript单线程。由于我们在 Node 中没有浏览器 API，谁...
我很确定我的ID和秘密是正确的。 这是真正的链接：（https://sandbox.mngkargo.com.tr/en/node/266） 发布 https://testapi.mngkargo.com.tr/mngapi/api/token 标题： 内容-
我定义了一个 Node 类，其值类型带有模板 模板 类节点{ T 值； 民众： 节点 (T & v) : val (v) {} ... 无效打印（）{cout<< v <<...
Typescript 无法与 tsconfig.json 一起使用
在项目中使用 tsconfig 运行 tsc --watch 时，出现以下错误。 它需要 Node js 中的 React 和 Redux 类型。 错误 TS2688：找不到“abstract-leveldow...”的类型定义文件...
我正在使用passport-google-oauth 运行node.js。从我的 package.json 中： "passport-google-oauth": "~1.0.0", 我遵循了本教程：https://scotch.io/tutorials/easy-node-authentication-google 在...
我已将 auth0 集成到 remix.run 应用程序中，现在尝试保存登录时发出的访问令牌： 从“@remix-run/node”导入{createCookieSessionStorage}； 导入 { getOrThrow ...
在使用我发布的包时出现错误“TextEncoder 不是构造函数”
我用 ReactJs、TypeScript 和 rollup 编写了一个包。 这是我的 rollup.config 从“@rollup/plugin-node-resolve”导入解析； 从“@rollup/plugin-typescript”导入打字稿； 进口...
我正在尝试运行我的内置生产版本代码。使用 Node 20.10、typescript 5 并且无法运行该构建版本。 下面是我的 package.json、tsconfig.json 文件。 { "name": "节点-
我已经在nodejs中设置了内容安全策略（CSP），并且它正在应用于node。但是，对于根 html 页面，未应用 CSP。如何借助nodejs应用在html上......
我正在尝试从此存储库节点-mecab 运行此代码 用于分析日语文本 从“@enjoyjs/node-mecab”导入{分析}； const result =等待分析(“こんにちは世界”); 康索...
托管在 Azure Artifact 上的 NodeRed 目录
我一直在尝试使用 Azure DevOps 实例上托管的 npm feed 将自定义目录添加到我的 Node-RED 安装中。我到处寻找文档，包括这个，我遇到了
我是 Node.js 新手，我正在尝试通过 Node.js 运行我的测试文件。我只是输入 node 。 ut63.js 但它显示以下错误： 错误：找不到模块 'C:\Users\User11\Desktop\Co...
部署过程中出现以下错误： 5:30:38 PM：[nodemon] 启动 `node server.js` 5:30:39 PM：服务器监听 http://localhost:3000 5:30:39 PM：/opt/build/repo/node_modules/mongodb...
如何修复 Namecheap 的 npm WARN 生命周期错误？
这是我在 Namecheap Cpanel 中运行 NPM install 时遇到的错误： 使用“--scripts-prepend-node-path”选项包含执行 npm 的节点二进制文件的路径。 我尝试添加一个
单个 Azure Function App 中的多个函数未部署
我有一个 Azure Function App，其中有两个函数在我的本地（Mac OS / Visual Studio Code / Node 20 / V4）上运行，在本地环境中测试时运行良好。 然而，一旦部署...
我在 Angular 17、Node.js v20.10.0 和所有 to=ime 中创建应用程序，我刷新或保存我的应用程序时收到此错误： node_modules/vite/dist/node/chunks/dep-68d1a114.js:45925 JSON.stringify(output.imports)), ^
JS - VSCode 在终端中没有 consol.log 输出
我的终端登录输出有问题： 我运行节点版本 23.4.0 在 Windows 上的 CLI 中使用 Node 并编写 JS 效果非常好 在 Vs Code 中，我创建了文件 app.js 应用程序.j...
为什么node用flannel加入kubernetes集群时没有创建CNI0网桥？
使用 flannel 作为 CNI 插件在 Centos 7 上设置新的 k8s 集群。将工作程序加入集群时，不会创建 CNI0 网桥。 环境是kubernetes 13.2.1，Docker-CE 18.09，F...
typescript .d.ts 文件无法被 typescript 识别，但 vsc
更新： 它不是打字稿，而是 ts-node“问题” 我回答自己，所以如果你仍然对这个“问题”感兴趣 - 进一步阅读:) 对困惑感到抱歉 也许我完全有
Google Drive - 使用 Node 通过 JSONClient 进行身份验证
我已成功使用 OAuth2 进行身份验证，现在拥有一个身份验证令牌。 加载此令牌会返回一个 JSONClient： const authClient = google.auth.fromJSON(凭证); 现在正在尝试使用这个
Node / GraphQL 和 Koa：地址已在使用 :::3000
我正在尝试将 GraphQL 实现到我的 KoaJs 服务器。但是，每次 nodemon 在更改时重新启动时，我都会在控制台中收到错误： 错误：监听 EADDRINUSE：地址已在使用 :::3000...
我正在使用 Nock (https://github.com/node-nock/nock) 来模拟由我需要在应用程序中测试的端点调用的底层服务。在端点的实现中，我称之为
Adminjs 实现问题“无法在模块外部使用 import 语句”
我是 Node Express js 的新手。只是尝试使用express js 编写后端代码。现在我想在我的项目中添加adminjs。由于我是本节的新手，因此我遵循了