在发布为 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 文件夹并重新安装包再次解决了我的问题。
BindableObject 和 ObservableObject 有什么区别？
使用 ObservableObject 你可以 @Publish 一个值。使用 BindableObject，您可以实现 didChange。 您什么时候会使用其中之一？我正在观看视频教程，他们突然使用了
“npm WARN EBADENGINE”是什么原因导致的？
使用 npm install 生成 package-lock.json 文件时，出现以下错误： npm WARN EBADENGINE 不支持的引擎 { npm 警告 EBADENGINE 包：'[email protected]'， npm 警告 EBADENGINE 需要：{ ...
npm v9.4.0 不支持 Node.js v14.15.0
npm 的接受版本是什么（Node.js v14.15.0）。给我以下错误： npm WARN cli npm v9.4.0 不支持 Node.js v14。 15.0。您可能应该升级到 npm WARN cli 新版本没有...
我从 NPM 下载软件包时遇到网络错误：屏幕截图。我该如何修复它？ D:\ionic\abc\abc\>npm install @capacitor/push-notifications npm 错误！代码 EPROTO npm 错误！系统...
安装 Angular CLI 时出现 Npm Angular 警告
当我尝试通过以下方式安装 CLI 时收到 npm 警告： npm install -g @angular/cli: C:\Users\myuser>npm install -g @angular/[email protected] npm 警告已弃用 [email protected]：此模块...
执行 npm install 时，使用 React-scripts 版本创建 React App 错误
对于我的 Create React 应用程序，我在执行 npm install 时收到以下错误 npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解析依赖关系树 npm 错误！ npm 错误！解析时：[email protected]...
终端无法识别 npm 和节点，使用 nvm 安装（在 MAC 上）
我在Mac上使用NVM安装了nodejs和npm，每当我打开新终端时，它总是忘记npm和node。我正在使用苹果电脑 我面临这个错误 未找到 npm npm-v 我期待着 npm ve...
我目前使用的是 Angular 版本 13。 当我尝试运行 npm install 命令时，出现以下错误。如何修复这些错误？ > npm 安装 npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法
运行 npm run dev || 时出现总线错误npm 启动
我似乎无法在我的 macOS 计算机上运行 npm run dev 或 npm start 。 每次尝试这样做时，我都会收到总线错误消息，输出通常如下所示： klvn git:(主) ✗ npm run dev ...
扫描字符串文字 common.gypi 时安装 npm 包时出错 -- node-gyp EOL
我正在使用 npm i 提取 React 应用程序的依赖项，我得到： gyp 信息 spawn args 'build', npm 错误！ gyp 信息生成参数 '-Goutput_dir=.' npm 错误！ gyp 信息生成参数] npm 错误！追溯（最...
无法解决依赖关系：来自@material-ui/[email protected]的peer React@"^16.8.0 || ^17.0.0"
我使用创建了一个反应项目 npm 初始化 -y npm 安装 React React-dom 然后我尝试安装 Material UI npm 安装@material-ui/core 它得到错误 npm 错误！代码 ERESOLVE npm 错误！解决...
我正在安装这些 npm 软件包： npm 我表达 body-parser bcrypt cors dotenv gridfs-stream multer multer-gridfs-storage 头盔 morgan jsonwebtoken mongoose 但是，当...
从自定义注册表安装包时出现 npm Shrinkwrap 问题
npm Shrinkwrap 无法按预期工作。 当我安装 @zowe/[email protected] 时未使用命令 npm 指定自定义注册表...
当我尝试安装React时，我收到此错误如何修复它并安装React
npm 错误！代码 ENOTFOUND npm 错误！系统调用 getaddrinfo npm 错误！错误号 ENOTFOUND npm 错误！对 http://registry.npmjs.org/create-react-app 的网络请求失败，原因： getaddrinfo ENOTFOUND your_proxy...
如何对使用 package.json 中的 file: 模式安装的本地 NPM 包进行 NPM 重复数据删除对等依赖项？使用 npm 安装软件包时，对等依赖项会正确删除重复数据
我正在将 npm 库发布到artifactory 上的npm 存储库。该库是使用 Angular 构建的，dist 文件夹和 package.json 看起来正确。发布时，其自身的请求已发布...
我正在尝试在我的项目中安装包“react-google-login”以进行用户身份验证。 这是错误代码： npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解决依赖性
npm 警告 ERESOLVE 在 npm 安装期间覆盖对等依赖关系
在我的 React 应用程序上运行 npm install 时，我看到以下日志。但是，npm 安装完成，我可以看到在 node_modules 下添加了 deps 另外，我的应用程序确实启动了。我的问题是是否可以
我尝试在 npm 上发布我的 Angular 库。 但我收到错误 npm 错误！该包已被标记为私有。从 package.json 中删除“private”字段以发布它。 但我没有任何公关...
如何修复 Namecheap 的 npm WARN 生命周期错误？
这是我在 Namecheap Cpanel 中运行 NPM install 时遇到的错误： 使用“--scripts-prepend-node-path”选项包含执行 npm 的节点二进制文件的路径。 我尝试添加一个
我正在寻找一种从 npm 注册表 api 查询 npm 包版本的方法。 到目前为止我发现的是我需要查询整个包元数据并从那里过滤版本，示例：...
正确使用 firebase 和 @firebase npm 包
当我向 firebase >9.0.0 包添加依赖项时，npm install 会同时下载 node_modules\ firebase 和 node_modules\ @firebase （没有提及）。 我知道@firebase 是...
我们在大多数项目中都使用 npm，除了一个私有模块，我们使用 YARN 来全局管理其他项目中依赖项的版本，仅仅是因为 npm 并不平坦......
我有一个以“npm start”启动的应用程序 我想在后台运行它。 该应用程序托管在aws EC2上。 我试过 ： npm 启动 & 如果我断开 ssh 连接则不起作用 能...
我的工作流程的一部分涉及使用命令 npm install 安装 npm 软件包的步骤，但由于某些未知的原因，我在下面收到此错误。我不确定下面的错误是什么或者......
React 的“npm create vite@latest”问题：无法初始化项目
我在尝试使用命令 npm create vite@latest 创建新的 React 项目时遇到问题。尽管遵循文档并确保我拥有最新版本的...
如何在 XLSX npm 中创建以分号分隔的 .csv 文件
我正在尝试使用 npm 中的 XLSX 包创建一个 csv 文件，结果是用 , （冒号）分隔的值，我想用 ; （分号）。我该怎么做呢？ LSX.utils.book_append_sheet(工作...
我正在尝试安装 salesforce CLI (linux)。我已遵循本指南的每个步骤，但我不断收到相同的错误/输出。 脚步： npm uninstall sfdx-cli --global -> 首先卸载 sfdx npm
使用 @aws-sdk/client-sqs npm 包从 EKS 集群 pod 推送到 AWS SQS 时出错
我在 AWS EKS 集群中使用 @aws/client-sqs npm 包将消息推送到标准 SQS 队列并收到以下错误： CredentialsProviderError：169.254.170.23 不是有效的容器我...
npm 在 MacOs M1 上的 expo React Native 项目中安装失败
我试图在expo React Native项目中安装一个包，但没有成功。根据相关的一些建议，我删除了node_modules文件夹，然后尝试运行npm install来安装...
最近我在度假，互联网连接有限。我正在用 Node.js 开发一个应用程序，突然需要一些 NPM 包。这严重阻碍了开发，我
Vue 2.0 + webpack 使用 npm 包中的组件
我正在尝试使用 webpack 和 Vue 2.0 设置一个项目，但在我的项目中使用 npm 包（如 vue-parallax）中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...
尝试在 React 应用程序中使用“azure-maps-animations”NPM 包时出现“未找到导出”错误消息
我们正在尝试在 React 应用程序中使用 Azure Maps Animations NPM 包，但无法导入它。 我们尝试了以下代码： 从“azure-maps-animations”导入{animations}； //
npm 包 mime 类型无法与打字稿（或 Nestjs）一起工作（给出未定义）
我尝试在 NestJs 中使用 mime 类型，如下所示。 从“mime-types”导入 mime； mime.contentType(req.url) 但是即使我已经安装了 mime-types npm 包，mime 也给了我未定义的信息。它确实...
当 package.json 指定不同的端口时，npm start 仅在端口 3000 上打开
我有一个 React 项目，它有多个可以在 Windows 机器上运行的构建脚本，但在我的 Mac 上，当我运行 npm start 时，它会忽略 package.json 并在端口 3000 上打开。 “开始”：“...
在项目上运行 npm run start:webpack 脚本会产生长达几页的亮黄色警告： [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] 解决“@babel/he...
./node_modules/@redux-saga/core/dist/redux-saga-core.esm.js 中的警告 1343:21-28 “在‘redux’中找不到导出‘compose’ @ ./node_modules/redux-saga/dist/redux-saga-core-npm-proxy.esm.js ...
我阅读了一些 Docker 和 Node.js 最佳实践文章，例如https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md 或使用
npm 模块 qr-image 允许使用 NodeJS 生成 QRCode，如下所示： 从“qr-image”导入 qr； 从 'fs' 导入 fs； qr.image('https://google.com/search?q=hello%20world!', {type:'...
我通过npm包和vite使用tinymce 6.8.3。 导入时 import 'tinymce/themes/silver';就像文档所说的那样，我收到了图中所示的错误。
Images.js:15 未捕获类型错误：axios__WEBPACK_IMPORTED_MODULE_0__.Axios.get 不是函数
我在 React 中遇到以下错误。 Images.js:15 Uncaught TypeError: axios__WEBPACK_IMPORTED_MODULE_0__.Axios.get 不是函数 我遵循了以下过程。 我安装了 npm install
无法运行 NestJS CLI 命令。 zsh：找不到命令：nest
通过运行 npm i -g @nestjs/cli 成功全局安装 NestJS CLI 后，我无法让 zsh 识别 Nest 命令。它总是抛出 zsh: command not fou...
我正在尝试使用 svelte 打包库创建一个 Svelte 组件包（您可以使用 npm create svelte@latest 并选择 svelte 库进行设置。然后我在
在 ec2 中安装节点，Amazon Linux2 错误 glibc >= 2.28
尝试在以下位置安装 npm 和 node： 猫 /etc/os-release 名称=“亚马逊Linux” 版本=“2” ID=“amzn” ID_LIKE="centos rhel fedora" 版本_ID=“2” 漂亮...
每当我尝试运行任何“npm”命令时，我都会收到以下错误，无法找到 npmcli 的配置。 错误：找不到模块“@npmcli/config” 需要堆栈： ...
我想在 Laravel 刀片视图中使用 Sweetalert 2。我收到这个错误。 话说我已经通过npm安装了它，但我没有做任何其他事情，我看到必须从...
我想在 NextJs 中执行 npm run build 时禁用某些文件夹的 eslint 我不想这样配置： 模块. 导出 = { eslint: { dirs: ['pages', 'utils'], // 仅在 ... 上运行 ESLint
安装pact-lang-api后Webpack/polyfill出错
在尝试连接刚刚使用 create-react-app 创建的 React 前端时，在将 pact-lang-api 导入应用程序后运行 npm run start 时收到此错误消息： ./
运行 Vite-React：“npm run dev”出现问题
当我尝试运行代码时，我收到以下消息。 节点：内部/模块/cjs/loader：1147 抛出错误； ^ 错误：在ite.js 中找不到模块“D:\Web-Development ite” 在...