问题标签 [react-app-rewired]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
154 浏览

reactjs - 使用 react-app-wired 服务反应应用程序时出错

我有一个使用react-data-grid@7使用create-react-app 创建的反应应用程序。由于 canary17 他们开始使用es2020 modules,为了使用更新的版本,我必须向应用程序添加对可选链nullish-coalescing-operator的支持,否则我在启动应用程序时会出错。 经过几次搜索,我安装了customize-crareact-app-rewired,将脚本命令更改为

并添加了这个config-overrides.js

尝试运行该应用程序时,我得到了一个奇怪的行为。使用start命令我得到了同样的错误,但如果我构建和部署应用程序正常工作。
如果我在 config-overrides.js 中添加错误并尝试开始运行启动,我会收到一条错误消息,所以我认为文件已加载。

我错过了什么吗?

0 投票
1 回答
426 浏览

react-native - 在 react-native-web 上实现 react-native-paper 时出现错误

我用来为纸张提供者实现的这个链接https://callstack.github.io/react-native-paper/using-on-the-web.html

复制 PaperProvider 后,我收到这些错误。

./src/index.tsx 中的错误未找到模块:错误:无法解析 'D:\Sentia Care\My Project\react-native\hybrid-react-app\packages\web_app\src 中的 'MaterialCommunityIcons.ttf' '@./src/index.tsx 16:106-143

0 投票
1 回答
183 浏览

reactjs - react-app-rewired 自定义默认启动 url

我已经安装了 react-app-rewired。在 package.json 我设置

当我跑

它会在 localhost:3000 上打开一个浏览器窗口我想将它打开到我在 hosts 文件中设置的特定 URL:port。这将允许我的本地前端应用程序联系远程 API,而不会引发 CORS 问题。

0 投票
2 回答
558 浏览

webpack - Webpack 开发服务器 - 在文件保存时将 CSS 文件合并到一个文件中

问题陈述

我在一个旧的 React 应用程序中有一个要求,它在特定目录中有多个 scss 文件。CSS 不是在组件级别导入的,应用程序使用 gulp 作为构建系统,它监视文件更改,吐出相应的 CSS 文件,合并它们,最后在 index.html 文件中注入一个链接标签(这一步不需要处于监视模式)并且页面被重新加载。

需要什么

对于上述步骤,我们需要将其从 gulp 配置转移到使用 Webpack。

到目前为止我所尝试的 - 什么有效

我最初的想法是(因为我们使用的是 react-scripts 和 react-app-rewired)

  1. 使用 node-sass-chokidar 将 sass 文件编译成 CSS 并写入特定目录。
  2. 完成此步骤后,在 config-overrides.js 中,我使用了一个名为 的 Webpack 插件webpack-concat-plugin,将特定目录中的文件合并为一个文件并将其写入构建文件夹。
  3. index.html 有一个指向该文件位置的链接标签

以上步骤在生产模式下工作。

到目前为止我尝试过的 - 什么不起作用

我也在尝试在开发模式下实现相同的功能,但我无法弄清楚“每次 node-sass-chokidar 吐出 css 文件时我如何运行 webpack-concat-plugin(它在监视模式下运行并且每当 scss 文件更改时运行)”。我尝试创建一个自定义 Webpack 插件并使用监视模式来点击,但我不确定上述问题。webpack 插件看起来像这样。

config-overrides.js 看起来像这样

0 投票
1 回答
518 浏览

reactjs - 使用 create-react-app 时如何设置样式化组件的命名空间?

我正在使用create-react-app. 我想避免不得不弹出 webpack 配置,但我想更好地控制我的类的生成方式。

我目前正在使用react-app-rewiredreact-app-rewire-styled-components尝试自定义我的样式组件类的编译方式。

根据文档,这应该可以通过设置namespace

这是我的config-overrides.js

现在有了这个配置,我希望我以前生成的类hfil7l-0 lmhJTL现在生成为my-app-hfil7l-0 lmhJTL. 但是,这似乎不起作用。

我想namespace专门使用,因为displayName并且fileName给我的控制权太少。我在同一页面上加载了多个应用程序,并且一些共享组件是扩展的styled-components,因此我必须确保我可以使每个应用程序的所有类都是唯一的。

我在这里想念什么?

0 投票
1 回答
214 浏览

webpack - 使用 CRA + rescripts 调用 webpack.ignorePlugin(到 tree-shake Moment.js 语言环境)

我正在使用带有rescripts的 CRA +

我想对 Moment.js 语言环境进行 tree-shake,与ignorePlugin Webpack 文档中所示的方式完全相同:

我知道我可以使用脚本轻松转换 webpack 配置:

但是我怎样才能获得webpack对象来调用该IgnorePlugin方法 - 或达到相同的结果?

react-app-rewired如有必要,我愿意从 rescripts 切换到替代方案,例如。

0 投票
0 回答
353 浏览

reactjs - react-scripts 2.1.1 更新失败

我的任务是将 ReactJS 应用程序中的“react-scripts”2.1.1 更新为更新的内容。我做了什么:1。

  • 克隆干净的项目
  • 更新“反应脚本”:“2.1.1”->“2.1.8”
  • npm 安装
  • npm 开始

我面临的第一个问题:

frontend@2.0.0 开始 C:\projects\reactjs-superapp react-app-rewired start

内部/模块/cjs/loader.js:797 抛出错误;^

  • 添加了“customize-cra”:“^1.0.0”、“postcss-normalize”:“^9.0.0”、“resolve-url-loader”:“^3.1.2”
  • npm 安装
  • npm 开始

现在开始出现编译错误 ./src/config/config.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss !./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/config/config.scss) @import "~importConfigPath"; ^ 找不到或无法读取要导入的文件:~importConfigPath。在 C:\projects\reactjs-superapp\src\config\config.scss (第 2 行,第 1 列)

这可能是预期的。这 ~importConfigPath 之前在 module.exports 函数中定义如下

现在必须在这个新结构中定义它。这就是我现在迷路的地方。怎么做?

0 投票
1 回答
656 浏览

reactjs - 使用 react-app-rewired 升级到 create-react-app 4.0 版:服务器启动错误

我一直在网上搜索,在任何地方都找不到提到的这种情况,尽管它一定并不罕见。

我一直在使用create-react-app(版本 3.4.x)react-app-rewired[主要是为了启用装饰器支持(对于 MobX)而不弹出]。

我最近尝试cra按照说明通过运行以下命令升级到最新版本(4.0):

但是,现在在启动我的 React 服务器时,我收到了这个错误:

如果我删除react-app-rewired并将启动脚本更改回 using react-scripts,服务器将启动,但我不再支持装饰器。

问题:是否react-app-rewired支持cra4.0?是否有替代解决方案可以在不弹出的情况下启用装饰器?感谢您的任何意见!

0 投票
1 回答
1343 浏览

reactjs - create-react-app 与 storybook 6.1.6 集成并且构建有错误

创建反应应用程序版本

故事书版

我可以跑去yarn start运行反应应用程序,也可以跑去start-storybook -p 9009 -s public开始故事书。

在构建 React 应用程序时,问题就来了。往下看。

  1. 当运行“yarn run build”时,它实际上运行react-app-rewired start
  2. 它显示在下面

我跑了npm ls babel-loader,看看下面的节目

  1. 我按照说明运行yarn add babel-loader@8.1.0。完成后,我得到以下信息:
  1. 然后运行yarn run build,它实际上运行react-app-rewired build并得到以下错误

无法建造

所以我的目标是代码node_modules/source-map/lib/source-node.js

并查看错误代码:

我运行并分析代码。aGeneratedCode 将是“obejct”,所以我将代码更改如下。

然后我现在可以运行 cra 应用程序和故事书的构建/启动。

但是为什么以及如何永久修复它?

0 投票
2 回答
893 浏览

reactjs - custom-cra - 当前未启用对实验语法“jsx”的支持

我正在使用 react-app-rewired 来配置我的 CRA 项目,因为我遇到了 2 个共存版本的 React 问题,我确信这是react-app-rewired/customize-cra.

一切都很好,直到我需要安装react-native-calendars为依赖项。正如您在我的addBabelPlugins配置中看到的那样;我需要安装@babel/plugin-proposal-class-properties以转换库的组件...但是我现在收到一个错误,抱怨我的代码库中的 JSX,我认为首先应该由 CRA 处理并看到我们正在覆盖/扩展 CRAreact-app-rewired我认为我不需要添加其他插件/预设,例如@babel/preset-react& @babel/plugin-syntax-jsx...

有人可以指出我正确的方向吗?我希望这个问题很常见,我刚刚搜索的问题页面很糟糕。

谢谢

信息

错误

配置覆盖.js

原始问题在这里