babeljs 相关问题

当前尚未启用对实验性语法“OptionalChainingAssign”的支持

我在我的 React js 应用程序中收到此错误。我没有在我的应用程序中使用 Eslint，并且我使用默认设置配置了 babel。 在我的 package.json 中，我配置了这些设置 “依赖关系&

Babel“plugins”不是有效的插件属性？

我正在尝试让 Nativewind 参与我的 Expo React-Native 项目。但我不断收到以下错误： iOS 捆绑失败 3618ms (C:\Documents\project ode_modules xpo-router ntry.js) 呃...

Jest 导入和导出失败

对 CRA 应用程序运行测试时，所有组件均出现以下错误： 错误：“导入”和“导出”可能仅与“sourceType：“模块””一起出现 我正在使用 create-react-app，带有 r...

我在烧瓶中遇到会话断章取义的问题

我用flask和flask-babel编写了多种语言面板，并在会话中设置lang来检测语言和加载内容，我使用工厂模式来创建应用程序。 现在我想使用会话

React Webpack 加载器无法加载类

我有两个打字稿包，一个React应用程序和一个基础设施包。 React 应用程序依赖于基础设施包（目前通过 npm 链接）。我刚刚向

如果从外部 svg-sprite 文件使用，svg 中的蒙版标签将被忽略

我正在尝试在我的项目中使用 svg sprite，并且效果很好，除非您在 sprite 中使用 mask 标签： 公共/精灵.svg： 我正在尝试在我的项目中使用 svg 精灵，并且效果很好，除非您在精灵中使用 mask 标签： 公共/sprite.svg： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <symbol viewBox="0 0 16 16" id='pharmacy'> <mask id="pathOne" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z"/> </mask> <path d="M5 2V1H4V2H5ZM11 2H12V1H11V2ZM5 5V6H6V5H5ZM2 5L2 4L1 4V5H2ZM2 11H1V12H2V11ZM5 11H6V10H5V11ZM5 14H4V15H5V14ZM11 14V15H12V14H11ZM11 11V10H10V11H11ZM14 11V12H15V11H14ZM14 5H15V4H14V5ZM11 5H10V6H11V5ZM5 3H11V1H5V3ZM6 5V2H4V5H6ZM2 6L5 6V4L2 4L2 6ZM3 11V5H1V11H3ZM5 10H2V12H5V10ZM6 14V11H4V14H6ZM11 13H5V15H11V13ZM10 11V14H12V11H10ZM14 10H11V12H14V10ZM13 5V11H15V5H13ZM11 6H14V4H11V6ZM10 2V5H12V2H10Z" fill="#171717" mask="url(#pathOne)"/> </symbol> </defs> </svg> src/App.js： export default function App() { return ( <div className="App"> <svg width="16px" height="16px"> <use href="/sprite.svg#pharmacy" /> </svg> </div> ); } 所以问题是所有浏览器都会忽略蒙版，并且您会得到错误的图像。奇怪的是，当您使用内联 svg 或将精灵放入标记内时，一切正常。问题可能出在 babel 上，因为我检查了 vanilla JS，它是一样的。有人可以帮助我吗？ https://codesandbox.io/s/epic-darwin-0n5uk5 当前外部 <use> 元素不支持蒙版或 ClipPaths。 作为解决方法，您可以使用 css mask-image 属性。 您可以通过数据 URL 或使用外部文件包含蒙版形状。 外部：mask.svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z" /> </svg> CSS： .masked-external { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); -webkit-mask-size: cover; mask-size: cover; } 数据网址掩码： .masked { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z' /%3E%3C/svg%3E"); -webkit-mask-size: cover; mask-size: cover; } HTML <svg class="masked" viewBox="0 0 16 16"> <use href="sprite.svg#pharmacy" /> </svg> 我发现，对于 Firefox（似乎不适用于 Chrome），您需要将 <mask> 及其内容移到 <symbol> 之外（到 svg 定义的顶层），如下所示： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="pathOne" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z"/> </mask> <symbol viewBox="0 0 16 16" id='pharmacy'> <path d="M5 2V1H4V2H5ZM11 2H12V1H11V2ZM5 5V6H6V5H5ZM2 5L2 4L1 4V5H2ZM2 11H1V12H2V11ZM5 11H6V10H5V11ZM5 14H4V15H5V14ZM11 14V15H12V14H11ZM11 11V10H10V11H11ZM14 11V12H15V11H14ZM14 5H15V4H14V5ZM11 5H10V6H11V5ZM5 3H11V1H5V3ZM6 5V2H4V5H6ZM2 6L5 6V4L2 4L2 6ZM3 11V5H1V11H3ZM5 10H2V12H5V10ZM6 14V11H4V14H6ZM11 13H5V15H11V13ZM10 11V14H12V11H10ZM14 10H11V12H14V10ZM13 5V11H15V5H13ZM11 6H14V4H11V6ZM10 2V5H12V2H10Z" fill="#171717" mask="url(#pathOne)"/> </symbol> </defs> </svg> 虽然我根本没有添加定义，但似乎把它搞砸了。 有些相关的来源：https://github.com/JetBrains/svg-sprite-loader/issues/325 我找到了另一种似乎可以在 Chrome 上正常工作的解决方案。 你需要改变两件事： 将遮罩移至根部（或在 <defs> 中） 更改 URL 以提及 SVG 名称本身，例如：url(sprite.svg#mask) 浏览器将重新加载相同的 svg，找到遮罩 ID 并应用遮罩。 因此，上述问题的原始文件应如下所示： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="pathOne" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H5V5L2 5V11H5V14H11V11H14V5H11V2Z"/> </mask> <symbol viewBox="0 0 16 16" id="pharmacy"> <path mask="url(sprite.svg#pathOne)" d="M5 2V1H4V2H5ZM11 2H12V1H11V2ZM5 5V6H6V5H5ZM2 5L2 4L1 4V5H2ZM2 11H1V12H2V11ZM5 11H6V10H5V11ZM5 14H4V15H5V14ZM11 14V15H12V14H11ZM11 11V10H10V11H11ZM14 11V12H15V11H14ZM14 5H15V4H14V5ZM11 5H10V6H11V5ZM5 3H11V1H5V3ZM6 5V2H4V5H6ZM2 6L5 6V4L2 4L2 6ZM3 11V5H1V11H3ZM5 10H2V12H5V10ZM6 14V11H4V14H6ZM11 13H5V15H11V13ZM10 11V14H12V11H10ZM14 10H11V12H14V10ZM13 5V11H15V5H13ZM11 6H14V4H11V6ZM10 2V5H12V2H10Z" fill="#171717" /> </symbol> </defs> </svg> （我在开头移动了 mask 属性以使其更清晰） 请注意，Chromium 上针对此问题存在很长的问题，并且在某些有关缓存的情况下，它无法正常工作.. https://issues.chromium.org/issues/41230670 https://issues.chromium.org/issues/40134477

ViteJS React 解析错误：缺少 '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression

我们有一个 vitejs React 应用程序，它抛出一个内部服务器错误： 0:0错误解析错误：[BABEL]：找不到模块'@babel/plugin-bugfix-safari-id-destructuring-collision-in-fun...

将 JSX 格式的字符串注入到 React 组件中

我有一个小的 React 页面，应该编译并显示 html 字符串。 在react-foundation中编写的字符串中的html 页面如下所示： 从 'react' 导入 * as React； 导入 * 作为 Reac...

使用多个入口点包含 babel polyfill 的最佳方式是什么

我正在使用带有多个入口点的 webpack 配置： var fs = require('fs'); var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.[hash].js'); 我...

Babel：根编程选项

我似乎不知道在哪里放置 babel 的根编程选项。 如果我有一个 monorepo 并且需要告诉不同的子包他们应该向上查找我的 babel.config.js 那么我

在 Intellij 中运行 `babel` 时出现 `env: node: No such file or directory` 错误

我使用的是Intellij Ultimate 2017.3并在其上安装了nodejs插件。我的nodejs项目需要babel来做es5到es6的翻译工作。为了让Intellij能够调试我的...

Redux 工具包无法与react.tsx一起使用

index.js:1 ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js 331:12 模块解析失败：意外的标记 (331:12) 文件是用这些加载器处理的： ./node_modules/babel-loader...

无法加载 webpack 配置。错误[ERR_REQUIRE_ESM]：不支持ES模块的require()

嘿我已经构建了一个 webpack 项目。我正在尝试设置 tailwindcss，但由于某些节点模块的依赖性，我在创建开发版本时收到此错误。 错误： [webpack-cli] 失败...

重复 __self 道具

我有一个基于Expo的react-native应用程序，最近尝试将我的expo sdk从版本48升级到版本50。 显然，这并不是一个顺利的过渡。我一直在清除错误......

如何收集从剧作家到 Sonar 的代码覆盖率（Angular 项目）

寻求有关该主题的帮助。 有一个使用 nrwl 构建的 Angular 项目，其中包括 Playwright e2e 测试。但是，我无法扩展现有的单元测试（这是基于 Jest 的，我们...

使用 Appwrite 函数时发生 CORS 错误（使用 JS 客户端）

我正在尝试向我的其中一个函数发送发布请求，但总是收到 CORS 错误 const url = "https://sample.appwrite.global/"; 常量标头 = { “继续...</desc> <question vote="0"> <p>我正在尝试向我的其中一个函数发送发布请求，但总是收到 CORS 错误</p> <pre><code>&lt;script&gt; const url = &#34;https://sample.appwrite.global/&#34;; const headers = { &#34;Content-Type&#34;: &#34;application/json&#34; }; const data = { &#34;key&#34;: &#34;&#34;, &#34;uid&#34;: &#34;&#34; }; fetch(url, { method: &#39;POST&#39;, headers: headers, body: JSON.stringify(data) }) .then(response =&gt; response.text()) .then(data =&gt; console.log(data)) .catch(error =&gt; console.error(&#39;Error:&#39;, error)); &lt;/script&gt; </code></pre> <p>这是客户端的代码👆</p> <p>我已附上错误屏幕截图以及平台 Web 应用程序主机名</p> <p>任何帮助将不胜感激 <a href="https://i.stack.imgur.com/mGRFM.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL21HUkZNLnBuZw==" alt=""/></a></p> <p><a href="https://i.stack.imgur.com/VnqvT.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1ZucXZULnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>答案<a href="https://stackoverflow.com/questions/76454243/appwrite-react-cross-origin-request-blocked">在这里</a>：</p> <ul> <li>确保您已将客户端应用程序添加为<br/>中的平台 应用程序写入仪表板。</li> <li>确保平台中的主机名设置正确。如果 您的客户端应用程序托管在<br/> <a href="https://subdomain.example.com" rel="nofollow noreferrer">https://subdomain.example.com</a>，您应该使用的主机名是<br/> 子域名.example.com.</li> <li>确保您使用正确的项目 ID 和端点：参考来初始化客户端</li> </ul> </answer> </body></html>

我的 package.json 中有太多开发依赖项

我正在做的项目让很多开发者感动。我在 package.json 中看到许多开发依赖项。我怎么知道哪一个没有被使用？我可以删除哪一个？ “devDependency&...

TS Jest“无法在模块外部使用 import 语句”。如何正确配置？

我有一个非常简单的反应应用程序（打字稿），我正在尝试使用 jest 和 @testing-library 配置和运行组件测试。 当我尝试 render() 时，其中一个组件开玩笑地抛出错误...

如何将 Babel 6 编译为 ES5 javascript？

我已经安装了最新版本的babel。目前是 6.4.0。我创建一个名为 myclass.js 的文件，其中包含以下代码。 类我的类{ 构造函数（名称）{ console.log("我是 MyCl...

JEST - 语法错误：意外的令牌“导出”与 uuid 库

我曾经在仅使用 JavaScript 来使用 Jest 时解决了类似的错误，但目前我无法使用 Typescript 来解决。 我所有的测试都运行良好，直到我安装了 Puppeteer，它需要......