问题标签 [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.
reactjs - 使用 react-app-wired 服务反应应用程序时出错
我有一个使用react-data-grid@7使用create-react-app 创建的反应应用程序。由于 canary17 他们开始使用es2020 modules,为了使用更新的版本,我必须向应用程序添加对可选链和nullish-coalescing-operator的支持,否则我在启动应用程序时会出错。
经过几次搜索,我安装了customize-cra和react-app-rewired,将脚本命令更改为
并添加了这个config-overrides.js
尝试运行该应用程序时,我得到了一个奇怪的行为。使用start命令我得到了同样的错误,但如果我构建和部署应用程序正常工作。
如果我在 config-overrides.js 中添加错误并尝试开始运行启动,我会收到一条错误消息,所以我认为文件已加载。
我错过了什么吗?
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
reactjs - react-app-rewired 自定义默认启动 url
我已经安装了 react-app-rewired。在 package.json 我设置
当我跑
它会在 localhost:3000 上打开一个浏览器窗口我想将它打开到我在 hosts 文件中设置的特定 URL:port。这将允许我的本地前端应用程序联系远程 API,而不会引发 CORS 问题。
webpack - Webpack 开发服务器 - 在文件保存时将 CSS 文件合并到一个文件中
问题陈述
我在一个旧的 React 应用程序中有一个要求,它在特定目录中有多个 scss 文件。CSS 不是在组件级别导入的,应用程序使用 gulp 作为构建系统,它监视文件更改,吐出相应的 CSS 文件,合并它们,最后在 index.html 文件中注入一个链接标签(这一步不需要处于监视模式)并且页面被重新加载。
需要什么
对于上述步骤,我们需要将其从 gulp 配置转移到使用 Webpack。
到目前为止我所尝试的 - 什么有效
我最初的想法是(因为我们使用的是 react-scripts 和 react-app-rewired)
- 使用 node-sass-chokidar 将 sass 文件编译成 CSS 并写入特定目录。
- 完成此步骤后,在 config-overrides.js 中,我使用了一个名为 的 Webpack 插件
webpack-concat-plugin
,将特定目录中的文件合并为一个文件并将其写入构建文件夹。 - index.html 有一个指向该文件位置的链接标签
以上步骤在生产模式下工作。
到目前为止我尝试过的 - 什么不起作用
我也在尝试在开发模式下实现相同的功能,但我无法弄清楚“每次 node-sass-chokidar 吐出 css 文件时我如何运行 webpack-concat-plugin(它在监视模式下运行并且每当 scss 文件更改时运行)”。我尝试创建一个自定义 Webpack 插件并使用监视模式来点击,但我不确定上述问题。webpack 插件看起来像这样。
config-overrides.js 看起来像这样
reactjs - 使用 create-react-app 时如何设置样式化组件的命名空间?
我正在使用create-react-app
. 我想避免不得不弹出 webpack 配置,但我想更好地控制我的类的生成方式。
我目前正在使用react-app-rewired
并react-app-rewire-styled-components
尝试自定义我的样式组件类的编译方式。
根据文档,这应该可以通过设置namespace
这是我的config-overrides.js
:
现在有了这个配置,我希望我以前生成的类hfil7l-0 lmhJTL
现在生成为my-app-hfil7l-0 lmhJTL
. 但是,这似乎不起作用。
我想namespace
专门使用,因为displayName
并且fileName
给我的控制权太少。我在同一页面上加载了多个应用程序,并且一些共享组件是扩展的styled-components
,因此我必须确保我可以使每个应用程序的所有类都是唯一的。
我在这里想念什么?
webpack - 使用 CRA + rescripts 调用 webpack.ignorePlugin(到 tree-shake Moment.js 语言环境)
我正在使用带有rescripts的 CRA +
我想对 Moment.js 语言环境进行 tree-shake,与ignorePlugin Webpack 文档中所示的方式完全相同:
我知道我可以使用脚本轻松转换 webpack 配置:
但是我怎样才能获得webpack
对象来调用该IgnorePlugin
方法 - 或达到相同的结果?
react-app-rewired
如有必要,我愿意从 rescripts 切换到替代方案,例如。
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 抛出错误;^
更新“react-app-rewired”:“1.6.2”->“2.0.3
npm 安装
npm start 从 v2.0 开始,“injectBabelPlugin”助手已被弃用。您可以使用 customize-cra 插件代替 - https://github.com/arackaf/customize-cra#available-plugins
遵循此处找到的解决方案https://github.com/timarney/react-app-rewired/issues/348并替换了现有的
mofules.exports = 函数覆盖 (config, env) { ...... }
至
- 添加了“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 函数中定义如下
现在必须在这个新结构中定义它。这就是我现在迷路的地方。怎么做?
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
支持cra
4.0?是否有替代解决方案可以在不弹出的情况下启用装饰器?感谢您的任何意见!
reactjs - create-react-app 与 storybook 6.1.6 集成并且构建有错误
创建反应应用程序版本
故事书版
我可以跑去yarn start
运行反应应用程序,也可以跑去start-storybook -p 9009 -s public
开始故事书。
在构建 React 应用程序时,问题就来了。往下看。
- 当运行“yarn run build”时,它实际上运行
react-app-rewired start
。 - 它显示在下面
我跑了npm ls babel-loader
,看看下面的节目
- 我按照说明运行
yarn add babel-loader@8.1.0
。完成后,我得到以下信息:
- 然后运行
yarn run build
,它实际上运行react-app-rewired build
并得到以下错误
无法建造
所以我的目标是代码node_modules/source-map/lib/source-node.js
并查看错误代码:
我运行并分析代码。aGeneratedCode 将是“obejct”,所以我将代码更改如下。
然后我现在可以运行 cra 应用程序和故事书的构建/启动。
但是为什么以及如何永久修复它?
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
原始问题在这里