问题标签 [react-app-rewired]

我正在使用一个config-overrides.js看起来像这样的文件：

重点是我需要添加 https://babeljs.io/docs/en/babel-plugin-transform-arrow-functions

但我不明白我应该在哪里加载那个插件。I have tried config.plugins.push(@babel/plugin-transform-arrow-functions)但它不会工作，所以我想知道如何使用 react-app-rewired 添加它。网站中提供的示例不包括 react-app-rewired 所以我不太确定

我们在一个非常大的单体上使用create-react-app(with )。react-app-rewired我们已经对构建时间进行了一些改进（将其缩短到大约 20 秒），但是在构建完成后（按照 a yarn start），应用程序需要 2 分钟才能真正加载到浏览器上。

在app.jsx我尝试删除所有根代码并只呈现一个典型的“Hello World”p标签，它几乎不需要那么长时间。我还使用serve在 build 文件夹前面运行了一个基本的 Web 服务器，这表明它可能webpack-dev-server存在应用程序大小的问题（或者说它是在实际构建之前构建的？）。

在 chrome 开发工具网络选项卡中，阻止页面加载的资产是static/js文件夹中的文件。

这是结果的要点webpack-bundle-analyzer

有没有人知道这个问题可能起源于哪里以及如何改善构建后的加载时间？

我正在尝试修改通过 CRA 打字稿模板创建的 SPA。修改使得项目必须能够通过不同的脚本（npm run build、npm run build-library）生成 SPA 和库。在添加配置以生成库时，我不得不移动 react、react-dom 作为对等依赖项。但是当作为 SPA 运行项目时，依赖库之一期望 React 存在并作为依赖项添加。那么有没有一种方法可以使用 react-app-rewired 来有条件地配置对等依赖项？

根据本文档，我在根目录中创建了一个 jsconfig.json 文件，以便能够在我的 React 应用程序（使用 create-react-app 设置）中使用绝对路径导入组件。不幸的是，这没有用。我尝试安装 react-app-rewired 和 react-app-rewire-alias 以尝试相同的操作，但无济于事。任何帮助，将不胜感激。

以下是我的 jsconfig.json 文件：

以及引发错误的文件（src/Components/Pages/Login/LoginForm）

以下行尝试从src/Configs/firebase.js导入几个方法

但是，以下错误仍然存​​在：

奇怪的是，在 src/index.js 的“组件”目录中导入“应用程序”组件时，规则似乎有效，即使通过react-app-rewired使用别名也是如此

我必须能够在运行时更改 ant 设计变量（而不是通过无主题文件）。我发现很多使用customize-cra和react-app-rewire-less的例子，但似乎没有一个适用于 craco。我必须使用 craco，因为我也在这个项目中使用tailwindcss 。

我试过的：

• antd-theme-webpack-plugin：我可以访问window.less.modifyVars，但它似乎什么也没做（调用它不会引发错误，但 antd 颜色不会改变）；
• antd-theme-switcher：和上面的很相似，window.less.modifyVars好像没什么效果；
• antd-theme：我不知道如何添加AntdThemePlugin.loaderincraco.config.js，我不确定这是问题所在，但我无法让它工作。

这是我的当前状态craco.config.js：

在这一点上，我真的要尝试任何可能的解决方案，这个问题真的很耗时。

我将我的 React 应用程序部署到 Vercel，它一直在工作，直到我添加了一个 web worker 和一个后台任务。

该应用程序仍然可以毫无错误地构建和部署，但是当我访问 url 时，我收到 404 not found 错误。

它仍然在本地运行良好。

我假设这是我使用 React-App-Rewired 设置网络工作者的方式。

我使用 Rewired 来避免“弹出”我的应用程序，它让我创建了一个 config-overrides.js（我认为这是为了覆盖 Webpack 中的默认值）

配置覆盖.js

我认为问题在于 Vercel 没有正确找到文件路径。

我尝试了一些方法来解决我在这里找到的问题：https ://github.com/webpack-contrib/worker-loader/issues/176

就像在返回配置之前添加这一行：

看起来使用 Next.js 的人也遇到了类似的问题，他们像这样修复了它：

但我没有使用 Next。

package.json 脚本。

一张图片，你可以看到我的文件结构（它再次在本地工作，所以我认为一切都设置好了）

这是我使用 React-App-Rewired 和网络工作者设置的教程：https ://medium.com/@danilog1905/how-to-use-web-workers-with-react-create-app-尝试中不弹出 3718d2a1166b

任何帮助表示赞赏。谢谢！！

我想在没有“react-app-rewired start”脚本的项目中使用 react-app-rewired npm 包。

这是我的 package.json 文件：

我可以通过sudo yarn watch启动我的服务器。所以我不能用react-app-rewired start重写它。

这是我的 config-overrides.js 文件：

我也可以使用webpack.config.js文件。如果有人知道如何在该文件中添加此配置，非常欢迎。谢谢你！

我是 babel 的新手，并且在 react 中测试了一些东西，所以如果你能为你可以建议的方法提供更多的背景信息，那就太好了。谢谢

该应用程序是使用 react-app-rewired 创建的，一切正常，但是当我运行我的测试脚本react-app-rewired test时，它会抛出此错误

SyntaxError: C:\Users\kishan\Documents\GitHub\kp\client\src\components\DateTest\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (219:5):

测试文件：

我尝试了什么： 可以在这里useBabelRc() from customize-cra查看文档

Causes your .babelrc (or .babelrc.js) file to be used, this is especially useful if you'd rather override the CRA babel configuration and make sure it is consumed both by yarn start and yarn test (along with yarn build).

但是得到与上面相同的错误

如果需要更多信息，请告诉我

我有一个使用 react-app-rewired 1.6 的应用程序。我想--display-error-details在调用它时传递给 webpack。有没有办法做到这一点？

我正在尝试在使用 react-app-rewired 的反应应用程序中运行柏树测试。

我的 package.json 看起来像这样

但是，当我尝试将 cypress 测试作为“yarn test”运行时，出现以下错误