标签: cra

我有一个关于在 CRA (create-react-app) 中集成 Ant Design 库的问题。

在我尝试按照文档中的要求集成它之后，在没有集成 Craco 的情况下，我总是收到以下 4 个警告：

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported
 @ ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
 @ ./src/components/pages/app/App.tsx 10:0-28
 @ ./src/components/index.ts 3:0-34 4:15-18
 @ ./src/index.tsx 6:0-31 8:38-41

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not …

我创建了一个内置打字稿模板的 Create React App 应用程序，然后我使用 npm 安装了 MSW 并根据 MSW 安装指南创建了文件。它对于玩笑来说工作得很好，但是对于浏览器来说，当我使用启动脚本时，我收到了一堆警告：

WARNING in ./node_modules/@mswjs/interceptors/lib/utils/uuid.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '<ROOT_DIR>\node_modules\@mswjs\interceptors\src\utils\uuid.ts' file: Error: ENOENT: no such file or directory, open '<ROOT_DIR>\node_modules\@mswjs\interceptors\src\utils\uuid.ts'
 @ ./node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js 167:13-40
 @ ./node_modules/msw/lib/esm/index.js 12:0-76 1568:14-28
 @ ./src/mocks/browser.ts 3:0-34 6:22-33
 @ ./src/index.tsx 8:0-41 10:0-12

以及类似的...

我找不到任何答案，所以我向你寻求帮助。

将 CRA 更新至版本 5 后。

运行时npm test我看到以下错误：

Determining test suites to run...\n\n  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: babelJest.createTransformer is not a function\n\n      at Object.<anonymous> (node_modules/react-app-rewired/scripts/utils/babelTransform.js:16:28)\n      at node_modules/@jest/transform/build/ScriptTransformer.js:382:73\n          at Array.map (<anonymous>)\n

我已经检查过，有一个针对 babel-jest 解决此问题的修复程序：\n https://github.com/facebook/jest/issues/11444并且已在版本上发布28

CRA 取决于版本^27.4.2。

有没有人遇到过这个问题，或者有一个不涉及覆盖 CRA 中指定的 babel-jest 版本的正确解决方案的想法？

最近我正在使用 vite 创建 React 应用程序，与 webpack 相比，它轻量级，配置少，速度快。 现在我的问题是， Vite项目是否需要 bable配置

我正在从空白的 CRA 模板开始开发 PWA。该应用程序需要在安装后完全离线工作，因此我利用 Workbox 的方法来预缓存所有静态内容。

不幸的是，我有一些 5 到 10 MB 之间的内容（音频文件），并且在 Create React App Service Worker 中，限制设置为 5MB（以前为 2MB - 请参阅此处））。

这些文件没有预先缓存，实际上我在构建过程中收到警告： /static/media/song.10e30995.mp3 is 5.7 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.。

遗憾的是maximumFileSizeToCacheInBytes似乎无法在 CRA SW 中进行配置:(

由于音频质量要求，我无法减小文件大小。

我还编写了一个自定义软件逻辑来预先缓存来自互联网的外部资源，并且我考虑在那里添加音频文件。但是 React 构建过程会根据文件内容向文件名添加哈希码，因此每次更新音频内容时我都需要更改 SW 代码，这并不理想。

所以我的问题是：

• 有什么办法可以强制maximumFileSizeToCacheInBytes在 CRA 应用程序中强制限制自定义值？
• 我正在考虑尝试在构建过程后获取哈希码并自动更新软件代码，但这对我来说不是很有说服力。
• 有没有其他解决方案或方法来实现我需要的？

这是我的 SW 代码（默认的 CRA 代码 + 最后我的自定义逻辑）

import { clientsClaim } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import …

我为 CRA 设置了 prerender.io 并且它运行良好，但是当机器人点击没有参数的 URL 时，它会放在 URL 的末尾 - 字符串“.var”

我尝试了 (.*) 的变体，但似乎不起作用。有任何想法吗？

这是 .htaccess 文件

Options +FollowSymLinks
RewriteEngine On

RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

<IfModule mod_headers.c>
    RequestHeader set X-Prerender-Token "TOKEN"
    RequestHeader set X-Prerender-Version "prerender-apache@2.0.0"
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On
    <IfModule mod_proxy_http.c>
        RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp [NC,OR]
        RewriteCond %{QUERY_STRING} _escaped_fragment_
        RewriteCond %{REQUEST_URI} ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff|\.svg))

        RewriteRule ^(index\.html|index\.php)?(.*) https://service.prerender.io/%{REQUEST_SCHEME}://%{HTTP_HOST}/$2 [P,END]
    </IfModule>
</IfModule>

将反应脚本从版本 4 升级到版本 5 后，我遇到了这个问题！

我使用 custom-cra 和以下选项：

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        '@primary-color': '#038fde',
      },
    },
  }),
  useBabelRc(),
);

ERROR in ./src/styles/wieldy.less (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[4]!./src/styles/wieldy.less)

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }
    at validate (C:\Workspace\harv-Harvest-frontend\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (C:\Workspace\harv-Harvest-frontend\node_modules\webpack\lib\NormalModule.js:580:19)
    at Object.loader …

声明并完成所有配置文件后，当我启动服务器时，我得到 Buffer not Defined 并且错误指向 npm 模块。 Uncaught ReferenceError: Buffer is not definedat node_modules/jsesc/jsesc.js

尝试启动使用节点 14.17.0 运行的 CRA 项目时出现以下错误 -> 加载 PostCSS“postcss-preset-env”插件失败：找不到模块“node:vm”

编译有问题：X

./src/app.css 中的错误 (./node_modules/css-loader/dist/cjs.js??ruleSet 1 .rules[0].oneOf[5].use 1 !./node_modules/postcss-loader/dist /cjs.js??ruleSet 1 .rules[0].oneOf[5].use[2]!./src/app.css)

模块错误（来自./node_modules/postcss-loader/dist/cjs.js）：加载PostCSS“postcss-preset-env”插件失败：找不到模块“node：vm”需要堆栈：

• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/@csstools/postcss-trigonometric-functions/dist/index.cjs
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-preset-env/dist/index.cjs
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/utils.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/index.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/cjs.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/loadLoader.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/LoaderRunner.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack/lib/NormalModule.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack-manifest-plugin/dist/index.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-scripts/config/webpack.config.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/overrides/webpack.js
• /Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/scripts/start.js

(@/Users/niltonxd/Workspace/harv-Harvest-frontend/src/app.css)

{
  "name": "harvest-front",
  "version": "1.7.4",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
    "@fortawesome/free-solid-svg-icons": "^5.10.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@types/jest": "^27.4.1",
    "@types/node": "^17.0.23",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "antd": "^4.18.7",
    "apexcharts": "^3.19.2",
    "apisauce": "^1.1.0",
    "connected-react-router": "^6.5.2",
    "dotenv": "^10.0.0",
    "formik": "^2.2.9",
    "har-validator": "^5.1.5",
    "history": "4.10.1",
    "js-file-download": "^0.4.9",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21", …

我克隆了一个 CRA 存储库，并从 npm 切换到了yarn。运行yarn start后我遇到一个错误，上面写着

[HPM] Missing "target" option. Example: {target: "http://www.example.org"}
error Command failed with exit code 1.

信息 请访问https://yarnpkg.com/en/docs/cli/run以获取有关此命令的文档。

似乎无法在网上找到太多有关修复的信息