在发布为 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 应用程序时，Webpack 无法编译错误
无法解析源映射：'webpack:///../../src/chains/index.ts' URL 不受支持 无法解析源映射：'webpack:///../../src/eips/index.ts' URL 不受支持 无法解析源代码...
sql loader：使用sql loader加载大于4000个字符的字符串
我需要使用sql加载器将CSV文件加载到表中，但列的长度超过了varchar2数据类型的最大长度。 建表语句： 创建表 TEST_PIPE_SEP (FILE_NM VA...
我正在尝试设置 webpack 的开发服务器和 HMR 来配合 Shopify 主题开发。当运行服务器并打开本地 IP 时，我从 Shopify 的 DNS 提供商 CloudFlare 收到此错误......
我最近启动了带有临时和生产环境的 Heroku 管道。我的应用程序是使用 React、NodeJS 和 Webpack 构建的。 当我部署到 staging 时，我的 baseURL 是生产 url，但它...
Vue 2.0 + webpack 使用 npm 包中的组件
我正在尝试使用 webpack 和 Vue 2.0 设置一个项目，但在我的项目中使用 npm 包（如 vue-parallax）中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...
我使用 webpack 5 和 HtmlWebpackPlugin 来构建我的前端 SPA。 我需要向 添加随机数属性 <question vote="0"> <p>我正在使用 webpack 5 和 <pre><code>HtmlWebpackPlugin</code></pre> 来构建我的前端 SPA。</p> <p>我需要将 <pre><code>nonce</code></pre> 属性添加到 <pre><code><script ...</code></pre> 注入的 <pre><code>HtmlWebpackPlugin</code></pre> 标签中。</p> <p>我该怎么做？</p> <p>额外问题：之后我在服务之前使用此页面作为 Thymeleaf 模板。如何注入<pre><code>nonce</code></pre>值？</p> </question> <answer tick="false" vote="0"> <p>如果您使用的是 webpack 4，海里有很多鱼——只需使用任何注入属性的插件，例如 <a href="https://github.com/numical/script-ext-html-webpack-plugin" rel="nofollow noreferrer">script-ext-html-webpack-plugin</a> 或 <a href="https://github.com/dyw934854565/html-webpack-inject-attributes-plugin" rel="nofollow noreferrer">html-webpack-inject-attributes-plugin</a> </p> <p>但是，上面提到的大多数插件都不适用于 webpack 5。解决方法是使用 <pre><code>HtmlWebpackPlugin</code></pre> <a href="https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates" rel="nofollow noreferrer">templates</a>。</p> <ol> <li>将<pre><code>inject</code></pre>中指定的<pre><code>false</code></pre>选项中的<pre><code>HtmlWebpackPlugin</code></pre>设置为<pre><code>webpack.config</code></pre>。</li> <li>在模板中添加以下代码，将所有生成的脚本插入到结果文件中：</li> </ol> <pre><code> <% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" defer="defer" src="<%= htmlWebpackPlugin.files.js[key] %>"></script> <% } %> </code></pre> <ol start="3"> <li>在 <pre><code>script</code></pre> 中添加所有必要的属性。百里香示例：</li> </ol> <pre><code> <% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" defer="defer" th:attr="nonce=${cspNonce}" src="<%= htmlWebpackPlugin.files.js[key] %>"></script> <% } %> </code></pre> <p>基于 <a href="https://github.com/jantimon/html-webpack-plugin/issues/538#issuecomment-270340587" rel="nofollow noreferrer">github 帖子</a></p>的答案 </answer> </body></html>
Django - Oracle Cloud Bucket 与 django-storages 集成
我已将 django-storages 配置为指向 OCI 存储桶。下面是配置： AWS_S3_ACCESS_KEY_ID = env('AWS_BUCKET_KEY') AWS_SECRET_ACCESS_KEY = env('AWS_BUCKET_SECRET')
运行 Vite-React：“npm run dev”出现问题
当我尝试运行代码时，我收到以下消息。 节点：内部/模块/cjs/loader：1147 抛出错误； ^ 错误：在ite.js 中找不到模块“D:\Web-Development ite” 在...
当我尝试使用 ant 单 jar 文件（使用 jar-in-jar-loader）构建时，里面的所有内容看起来都符合预期。清单内容是 清单版本：1.0 Ant 版本：Apache Ant 1.10.14 创建-...
我在我的 React 项目中使用 React-Router。我有一个如下所示的移动页面： 从“反应”导入反应； 从 'axios' 导入 axios 导出异步函数加载器({ params }) { ...
无法从S3存储桶下载文件。 （Langchain + s3）
我正在编写一个项目，使用s3来存储文件pdf，并使用langchain来连接和加载文件。 这是我的代码： const loader = new S3Loader({ bucket: process.env.BUCKET, key: filekey, // 示例: test/
django-cors-headers 不允许来自允许来源的请求
我面临的问题是我无法从 NextJS 前端获取现有用户。我使用的后端框架是 Django（以及 django-cors-headers 包）。 django-cors-he...
在我的 React Typescript 应用程序中，我收到此错误。 webpack 编译时出现 1 个警告 src/App.tsx 中出现错误：30:21 TS2304：找不到名称“DecompressionStream”。 28 | 28 const enc = new TextEncoder()...
安装pact-lang-api后Webpack/polyfill出错
在尝试连接刚刚使用 create-react-app 创建的 React 前端时，在将 pact-lang-api 导入应用程序后运行 npm run start 时收到此错误消息： ./
如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？ 简单的例子： 组件.vue 如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？ 简单的例子： 组件.vue <template> <div class="icon" v-html="icon"></icon> </template> <script> export default { data () { return {icon: '<svg>...</svg>'} } } </script> <style scoped> .icon svg { fill: red; } </style> 生成html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div> 生成CSS .info svg[data-v-9b8ff292] { fill: red; } 如您所见，v-html 内容没有 data-v 属性，但生成的 css 对于 svg 具有 data-v 属性。 我知道这是 vue-loader 的预期行为（https://github.com/vuejs/vue-loader/issues/359）。在本期中提到了后代选择器。但正如你所看到的，我在我的 css 中使用了它，但它不起作用。 如何设置 v-html 内容的样式？ 我正在使用vue-loader 15.9.1。 >>>解决方案对我不起作用（没有效果），而/deep/方法导致构建错误...... 这是有效的： .foo ::v-deep .bar { color: red; } 正如我在这里的回答所述： 新版本的vue-loader（从版本12.2.0开始）允许您使用“深层范围”CSS。你需要这样使用它： <style scoped>现在支持可以影响子级的“深度”选择器 使用 >>> 组合器的组件： .foo >>> .bar { color: red; } 将被编译为： .foo[data-v-xxxxxxx] .bar { color: red; } 更多信息请参见vue-loader的发布页面 将 /deep/ 选择器与 SCSS 一起使用对我来说不起作用，但后来我尝试使用 ::v-deep 选择器 例如 ::v-deep a { color: red; } 参见这个答案 AS Sarumanatee 说，如果接受的答案不起作用，请尝试： .foo /deep/ .bar { color: red; } 使用:deep {} 根据您的情况，您应该这样做： <template> <div class="icon" v-html="icon"></div> </template> <style scoped> .icon { :deep { svg { fill: red; } } } </style>
如何在 React 中使用带有 className 属性的 TailwindCSS 实用程序类
我为 React 创建了一个模板（样板）存储库，它提供 ESLint、Typescript、TailwindCSS 和 Jest 测试，并使用 Webpack 构建。 然而，TailwindCSS 实用程序类不...
`我的 React 应用程序运行良好，但升级到 React 18、mui v5 和 redux v5 后，它没有渲染任何内容。 在终端中，我得到： webpack 编译成功 但在 chrome 控制台中...
webpack devserver 代理到 https，给出“尝试代理请求时发生错误”和 SELF_SIGNED_CERT_IN_CHAIN
尝试设置从本地主机到 https 站点的代理时看到以下错误 [HPM] 尝试将请求 /api/analytics/getDataByPage 从 localhost:8080 代理到 https://exam 时出错...
django-hosts 强制重新加载不同的 urls.py
我正在使用 django-hosts 让不同的域名指向一个 Django 应用程序。我的 Django 应用程序的大部分服务于 mydomain.com 站点，但有一个函数处理 mydoma.in 等处的短 URL。 你...
我已经签出了一个非常旧的功能分支，并且想要对 master 进行变基。 但是，有一些 webpack 构建文件未包含在 .gitignore 中，这会导致 rebase 提示我解决
docker 的 django-environ 和 Postgres 环境
我正在为我的 Django 项目使用 django-environ 包。 我在 .env 文件中提供了数据库 URL，如下所示： DATABASE_URL=psql://dbuser:dbpassword@dbhost:dbport/dbname 我的数据库设置在
Django/AWS - 调用 HeadObject 操作时发生错误 (403)：Forbidden
我正在尝试设置 Django 项目以在 AWS S3 存储桶上托管静态图像，但是当我尝试通过 Django 管理面板上传图像时，出现以下错误 这些是我在 Django 中的设置
为什么我们主要使用 Django 中间件？ 我对 Django 比较陌生，所以我试图理解 __call__ 和 process_view() 或 process_request() 方法之间的区别。据我所知...
我有一个 django 4 表单，其中有一些小部件供用户选择一些值： 从 django 导入表单 从 .app.model 导入 MyModel 从 bootstrap_datepicker_plus.widgets 导入 DatePickerInput ...
如何在 django 应用程序中正确聚合 Decimal 值：“decimal.Decimal”对象没有属性“aggregate”
我在 django-tables2 表中，尝试计算列的总和（基于模型中的 MoneyField (django-money)，请参见下文）： 将 django_tables2 导入为表 类 PriceAmountCol(表.C...
如何解决错误：collectstatic - 找不到后端“storages.custom_azure.AzureStaticStorage”
我有一个 django 应用程序，并且已经使用以下命令安装了模块：django-storages[azure]：pipenv install django-storages[azure] 现在我尝试运行collectstatic 命令。但如果我输入
Django：如何从 django 中的 get_object_or_404 获取可变对象？
我正在使用 Django==4.2，在我看来使用 get_object_or_404 函数后我得到了一个不可变的对象。 结果 = get_object_or_404(MyModel, id=id) 我需要将这个“结果”传递给我的f...
从Django检索数据通过Datatable选择Option
我有一个问题，在渲染数据表或触发后，我无法将 payrolled_list 中的 Django 数据调用到选择选项中。我只想将 Django 中的数据反映到选择选项，但我
我正在尝试卸载超级用户环境中的所有 django 软件包，以确保我的所有 webapp 依赖项都安装到我的 virtualenv 中。 须藤苏 sudo pip 冻结 | grep -E '^django-' | grep -E '^django-' | xarg...
我正在使用 django-history-admin 我有模特课 类 MannedSetting(BaseModel): 历史=历史记录() 类元： db_table = 't_manned_setting' 确认消息 = m.CharFi...
如何在 django-crispy-forms 中使输入框的宽度彼此相同？
我正在用 Django 重写我的网站，我想使用 Django 表单，因为它比在 HTML 中手动编写每个表单要容易得多。我查看了 Cripy-Forms 文档并发现......
我正在 Win7 主机上的本地 Vagrant arch 机器上运行 Django。我在 .env 文件中从 Django 设置了环境变量。在我的应用程序中，所有静态文件都正确提供，并且一切正常......
我使用 JS 和 Django 视图功能在 Django Web 应用程序中实现了自动保存功能，但它会每隔一段时间保存一个新的模型实例
我使用 JavaScript 和 Django views.py 函数作为端点在 Django 4 Web 应用程序中实现了自动保存功能。我得到它来将表单/模型实例保存到数据库中，
我需要为用户通过 django 应用程序中的视图对数据库所做的更改创建一个日志条目。 我已经启用了 django-admin 模块，我可以检索更改的日志...
在我的 Django 应用程序中，我有以下模型： 类 SuperCategory(models.Model): 名称 = models.CharField(max_length=100,) slug = models.SlugField(unique=True,) 类类别（模型.模型）： ...
我想简单地知道Django中的Meta类是什么以及它们的作用。 从 django.db 导入模型 类作者（models.Model）： first_name=models.CharField(max_length=20) 姓氏=models.CharF...
如何使所有 Django 应用程序 locale//django.po 翻译可从 Javascript 访问，以便您可以动态翻译 Javascript 小部件中的文本？ 根据这些文档，您...
我的 Django 模型之一的详细视图中有一个“编辑”按钮。此按钮将用户发送至管理面板。 “项目”模型的示例： /管理员//
Django 和 SQL Server 的数据库配置 - 转义主机
我已将 Django 应用程序设置为使用 Microsoft SQL Server 数据库。这是我的数据库配置。 数据库= { '默认'： { '引擎': 'mssql', 'NAME': "报告", '
所以我正在一个使用 Django 2.2.9 的遗留项目中工作，这里我们有 3 个数据库，从来没有人迁移过两个额外的数据库，现在是时候这样做了，但没有人知道如何在 django 上做到这一点。 ..
Django 已翻译成我的语言，但我不喜欢某些翻译的短语（个人喜好）。 所以我设置了语言环境文件夹并运行 python manage.py makemessages -l fa_IR 并且我...
如何添加 django-filter Rangefilter 类？
我尝试将引导类添加到价格范围过滤器中，但我不能， 导入 django_filters 从 panel.models 导入产品、类别、尺寸、TopNote、BaseNote、MidNote 从 django 导入表单 班级
如何从字符串值设置（Django）celerybeat cron 计划
我正在使用 Django 和 celerybeat。我想通过 env var （cron 的字符串值）配置 cron 计划。 我们目前正在使用 celery.schedules 设置这样的 cron 计划。
我对 Django 非常陌生，正在开展我的第一个培训项目。 我想每个月记录一组仪表（水、电等），并且我想在 html 表中查看这些仪表...
我正在尝试实现一个预约应用程序，用户可以在其中创建与预先存在的课程关联的会话。我想做的是使用 django CreateView 创建一个
Django - PropertyFilterSet - 当属性引用模型时如何过滤属性
给定以下 Django 模型，如何使用 django_property_filter 包过滤模型的属性： # 模型.py 从 django.db 导入模型 类管理器（模型.模型）： 名称 = 型号。
为什么 cookiecutter-django 在入口点执行期间不设置 DATABASE_URL 和 CELERY_BROKER_URL？
cookiecutter-django 在本地开发环境中执行“入口点”文件期间不会为 DATABASE_URL 和 CELERY_BROKER_URL 设置环境变量。 在我手动“导出”之后
我创建了一个非常小的 Django 应用程序来管理一个非常小的库存。 我的 models.py 代码是： 类库存（模型.模型）： 帐户 = models.ForeignKey( “账户。账户...
自从 django 3.0 支持异步以来，我想知道数据库查询会发生什么。我在官方文档中没有看到任何更新，我确信语法如下： b5.name = '新名称' b5.保存...