问题标签 [craco]

我正在使用带有craco的 create-react-app (Create-React-App-Configuration-Override)

克拉科不是很异国情调。它只是允许我将我自己的 eslintrc 文件与 create-react-app 一起使用。

我正在尝试使用自定义 eslint 格式化程序，特别是eslint-formatter-friendly 可以满足我的需要（通过 iTerm/Guake 终端链接到行号的文件），但是有很多替代格式化程序：http: //npmsearch.com/ ?q=eslint 格式化程序

我尝试在我的 .eslintrc.js 文件中设置一个format: 'unix'或formatter: 'unix'- 但这不起作用，eslint 明确给出了一个错误，说“无法识别的顶级属性”。

我需要使用 craco 获得的变量来设置代理 http-proxy-middleware 的目标。我已按照本指南为不同的环境提供更多配置文件。我有 3 个文件 local.js、development.js 和 production.js，它们由 craco 使用不同的 npm run startlocal、startdevelopment 选择。

在 package.json 我有：

问题是我想根据我所处的环境更改代理功能，因此使用 http-proxy-middleware 我使用了 setupProxy.js ，如guide所述。如果我从“环境”插入导入环境；在 setupProxy.js 我有错误的意外标识符。

这是 setupProxy.js 的代码：

npm run startlocal 的控制台输出

意外的标识符
npm ERR！代码 ELIFECYCLE
npm 错误！errno 1
npm 错误！seltirmedfront_candidati@0.1.0 startlocal：cross-env CLIENT_ENV=local craco start
npm ERR！退出状态 1
npm ERR！
npm 错误！在 seltirmedfront_candidati@0.1.0 startlocal 脚本中失败。
npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

我想这个问题与 setupProxy.js 是自动加载的并且在 craco.config.js 之前加载的事实有关，所以它没有那个导入。

我正在使用带有 craco 和 craco-cesium 的 create react 应用程序将 cesium 加载到我的项目中。我正在尝试设置 jest 以开始创建测试，但问题是 Cesium 正在使用 requireJS。

我将以下内容添加到我的package.json

根据此处打开的票证：https ://github.com/facebook/jest/issues/1914

我setupTests.js使用以下代码设置：

我对有效渲染进行了第一个基本测试：

但是，我<App />使用以下代码在组件内部的一个视图中收到错误：

在调用它的函数时报告 Cesium 为未定义。我尝试使用jest.config.js以下代码从那里获取配置：

但是创建反应应用程序不会获取此文件，因此我无法尝试验证这是否可行。

我想通过Craco将这些指令添加到 Webpack 中：

这个怎么做？我根本不熟悉 Webpack 或 Craco

基本上我想做的是我有animals.json文件，但目前通过以下方式导入它：

从 './animals.json' 导入动物

当我实际上想要一个像 localhost:8000/static/media/animals.json 这样的 URL 时，我最终得到了 json 文件的内容，并且只有当我打开该链接时，才会显示 json 文件的内容......

我被指示通过上述几行覆盖 webpack 的默认功能可以完成此操作...

目前我在反应应用程序的客户端文件夹中导入文件的方式是使用我认为使用 Webpack 的 import 语句。例如

由于 Webpack 配置，这有其局限性.....

我想知道是否有不同的方式来访问 React 项目中的文件......

我对当前导入方式的问题是，如果我导入 png 它确实给了我一个静态链接，例如

但是当我从'../../game_book/images/animals.json'导入一个json文件时导入animals_json；我不明白

但是json的实际内容例如

我需要的是一种一致的方式来访问我的反应应用程序的客户端文件夹中的文件夹内的资产......因此，如果我有一个 json 文件，我希望能够通过 ./myassets/animals.json 或如果它访问图像 ./myassets/myimage.png 等。就像我使用没有 React 的普通 html 文件时一样......我可以通过 ./foldername 访问与 html 文件位于同一文件夹内的文件夹，然后如果文件夹名中有一个 myimage.png 然后我可以通过 ./foldername/myimage.png 访问它

我有什么选择？我可以使用 React-router 创建自己的静态媒体链接吗？

我按照官方 README和中篇文章“My Awesome Custom React Environment Variables Setup”安装并配置了 craco 。我做了

• sudo yarn global upgrade create-react-app
• create-react-app craco-getting-started
• yarn add react-scripts typescript @types/react @types/react-dom

并创建了必要的文件

public/index.html：

src/App.tsx：

src/index.tsx：

并添加

到package.json.

到目前为止，样板。yarn start该应用程序以“Hello world！”开头并显示。

现在，我通过创建来配置src/environments/development.tscraco

并src/environments/production.ts与

以及craco.config.js内容

并craco使用yarn add @craco/craco --dev和安装。cross-envyarn add cross-env

现在，如果我想使用环境引用来访问environment.someKey，例如App我需要添加import environment from "environment";in src/App.tsx，但这会导致yarn build并且yarn start由于以下原因而失败

如何使用这个创建的设置？

我在https://gitlab.com/krichter-sscce/craco-getting-started提供了一个 SSCCE，其中不包含其他信息，但可以更轻松地重现问题。

我试图在运行时通过require.context我的 CRA（使用 Typescript）项目做一些要求，但我只收到这些类型的错误：

TypeError: __webpack_require__(...).context 不是函数

和

关键依赖：require函数的使用方式不能静态提取依赖

我在某处读到现在需要通过 Babel 或cra-rewired. 好吧，我已经在使用 Craco 来启用 Less-support，但我不知道如何添加require.context到我的 Craco 配置中。

有人知道怎么做吗？

更新：这就是我调用 require.context 的方式：

更新 2：

正如该线程中的一些评论所暗示的那样，我尝试babel-plugin-require-context-hook像这样添加到我的应用程序中：

然后我试过require.context这样打电话：

但后来我得到这个错误：

TypeError：fs.​​readdirSync 不是函数

更新 3：

似乎 CRA确实支持 require.context 而根本不需要任何 polyfill。但是当它通过导入的模块执行时似乎失败了。在我之前的尝试中，我一直在执行对require.contextin myfile.js（见上文）的调用，该调用已通过index.js如下方式导入：

但是，如果我改成index.js这样：

它就像一个魅力！为什么？！

运行“craco build”时出错

执行命令：

npm run dist

npm run build如果我从同一个文件夹运行，这是同样的错误。

package.json 文件中的命令：

错误输出

如果我通过运行检查 craco 版本，npm info craco version那么我会收到0.0.3. 我正在运行节点 v8.0.0，npm 版本是 5.0.0

由于某些项目特定条件，我在节点 v8.0.0 上。

我想将svgr 的 webpack 插件与 create-react-app 一起使用，以将 SVG 与 MaterialUI 的 SvgIcon 一起使用。我正在使用craco将 svgr 添加到 Webpack 的配置中。

目前，无论何时应该渲染 SVG，都会引发以下错误：

我的 craco.config.js：

如何正确嵌入 SVG？

Storybook 目前调用react-scripts. 但是，我已将 CRA 配置的某些部分覆盖为craco. 这意味着我的应用程序是用 调用的craco ...，而不是react-scripts ....

是否有一个干净的解决方案来craco代替 Storybook 调用？