标签: react-scripts

我使用 facebook/create-react-app 创建一个 React 应用程序，并成功在http://localhost:5000上运行生产构建。

我的问题是有什么方法可以更改此生产版本中的 5000 端口吗？

根据高级配置，在生产中无法更改 HOST 和 PORT，只能用于开发

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration。

这是我的 package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  }

这是我的.env

##
HOST=127.0.0.1
PORT=8008
## PUBLIC_URL=http://myexamplesite.lk/
##

REACT_APP_ROOT_BASE_URL=https://myexamplesite.lk/api/
REACT_APP_ROOT_BASE_URL_META=http://myexamplesite.lk/

我已经花了整整一天试图解决这个问题.我试着保持描述的简短.

• 使用Express-Mongo-React网络应用程序(MERN)
• 一切都在本地系统中正常运行.
• 我已经将本教程称为在AWS服务器(开发模式)中托管我的项目
• 我有'Client'文件夹,我保留所有反应代码.
• 在服务器上传代码后,我运行'npm install'

• 除了一个外,所有依赖项都已正确安装.

  即React-scripts

安装此react-scripts包后,我看到此错误消息

'发现1个高严重性漏洞 '

'npm audit' gives following summary


High         : Missing Origin Validation 
Package      : webpack-dev-server   
Patched in   :  >=3.1.11 
Dependency of: react-scripts

我重新启动了AWS实例,从头开始一切.什么都没有帮助.

可能是根本原因？

背景

我或多或少一直在遵循官方指南来设置带有react的本地开发环境，并且似乎使用了create-react-app，这确实设置了很多东西。

现在，如果我运行，npm run build我会在build文件夹中得到所有内容的缩小版本。但是，如果我运行npm startNodeJS提供的版本，则似乎没有任何修改。但是我看不到这些文件。

题

所以：

• 我可以访问npm start某处生成的文件吗？由于这些似乎未修改。（build从未在那里修改）
• 还是可以以某种方式运行npm run build，以便使用未最小化的文件进行“开发”构建？

尝试

我的目的只是获得对React脚本的最小化版本的访问。

至于最后一个问题，我尝试了该问题中建议的一些参数和环境变量，但是如您所见，它失败了：

$ NODE_ENV=dev npm run build --dev --configuration=dev

> example-project@0.1.0 build [...]
> react-scripts build

Creating an optimized production build...
[...]

系统

我的package.json具有默认脚本：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

注意：请不要问我为什么这样做，或尝试说服我这是不好的。我可能想要这样做的原因有很多，例如调试或此特定用例。

我正在构建一个 Docker 映像，用于使用单独的 React 应用程序进行调试Dockerfile

FROM node:11-alpine\n\nCOPY package.json .\nCOPY yarn.lock .\nRUN yarn install\n\nCOPY public/ ./public/\nCOPY src/ ./src/\n\nEXPOSE 3000\nCMD yarn run start\n

和package.json

{\n  "name": "yarn-start-in-kubernetes",\n  "version": "0.1.0",\n  "private": true,\n  "dependencies": {\n    "react": "^16.8.1",\n    "react-dom": "^16.8.1",\n    "react-scripts": "2.1.3",\n    "babel-loader": "8.0.4"\n  },\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "react-scripts build",\n    "test": "react-scripts test",\n    "eject": "react-scripts eject"\n  },\n  "browserslist": [\n    ">0.2%",\n    "not dead",\n    "not ie <= 11",\n    "not op_mini all"\n  ]\n}\n

当图像与 一起使用时，它会按预期启动开发服务器docker run。升级至

localhost:3000当我使用运行开发服务器时npm run start，服务器按预期工作。我正在使用react-scripts，我还没有弹出react应用程序。

我想做的是在反向代理后面设置开发服务器。因此localhost:5572/author/name/将指向运行在localhost:3000.

设置工作正常，index.html 已加载。但当开发服务器运行在 时"/"，页面会尝试将脚本加载为"<script src="/static/js/bundle.js"></script>". 因此，它期望 URL 为localhost:5572/static/js/bundle.js. 但反向代理正在提供相同的文件localhost:5572/author/name/static/js/bundle.js

在 package.json 中，我指定了

{
    ...
    "homepage": "./",
    ...
}

所以我的生产版本有相对路径，但开发版本没有。

有没有办法使用相对路径而不是绝对路径？或者我可以使用不同的解决方案。

谢谢。

当我在 React 中构建应用程序时遇到错误。仅当我尝试构建应用程序时，我才注意到此错误。

当我停止开发服务器并再次运行它时，它显示了相同的错误。看来我做了一些更改，仅在我再次启动服务器或进行构建时才显示：

找不到模块：错误：无法解析“\node_modules\htmlparser2\lib”中的“缓冲区”重大更改：webpack < 5 默认情况下用于包含 node.js 核心模块的 polyfill。现在不再是这种情况。验证您是否需要这些模块并为其配置一个polyfill。

如果你想包含一个polyfill，你需要安装“buffer”。如果你不想包含一个polyfill，你可以使用一个空模块，如下所示：resolve.alias: { "buffer": false }

错误 命令失败，退出代码为 1。

我的申请是用 CRA 和 Typescript 制作的。这是我的package.json：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "cross-env NODE_OPTIONS='--max-old-space-size=4096' react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "@date-io/moment": "^1.3.13",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@optimizely/react-sdk": "^2.4.0",
    "apollo-boost": "^0.4.9",
    "classnames": "^2.2.6",
    "formik": "^2.2.5",
    "graphql": "^15.4.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "react": "^16.13.1", …

我有一个使用react版本17.0.2和react-scripts版本的反应应用程序4.0.3

我将我的反应版本更新到 18，但我没有更新我的反应脚本。

这是正确的做法吗？我真的需要升级react-scripts才能体验React 18的所有新功能吗？

我正在 Ionic/react 中构建一个应用程序，到目前为止它已经正常运行。我在 Ruby 中遇到了 FFI 架构错误，然后运行了brew install ruby​​，导出了路径，并用brew重新安装了cocoapods。从那时起，我的反应脚本构建每次都会失败，并显示以下错误消息：

You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer

我没有做任何其他会影响它的事情，而且我正在努力寻找任何相关信息。任何有关我如何解决此问题的建议或帮助将不胜感激

我在这个问题上花了好几天。是的，我升级到了react-scripts 5，是的，我把"react-error-overlay": "6.0.9"放在 package.json 中，是的，我删除了 node-modules + package-lock.json，清除了缓存并再次安装 npm 。

在我完成这一切之后，错误变得更糟。现在，当我启动应用程序并立即发生此错误时，我不会让我在错误发生之前使用该应用程序一段时间并使所有内容都无响应，而是会出现白屏。

另外，为什么执行“process?.env”而不是“process.env”不能解决代码级别的问题？

错误：

`Uncaught ReferenceError: process is not defined
    at ./src/GlobalProperties.ts (GlobalProperties.ts:18:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/pages/LoginPage.tsx (ForgotPasswordPage.tsx:75:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/error/pages/NotFoundPage.tsx (ForbiddenPage.tsx:34:1)
    at options.factory (react refresh:6:1)`

引发错误的代码行：

environment: process !== undefined ? (process.env?.REACT_APP_ENV || "DEV") : "DEV",

（尝试只做 process?.env?，同样的事情）

我的package.json：

{
  "name": …

最近升级到了 React-scripts 版本 5.0.1，为此，我需要通过导入NodePolyfillPlugin我的 React-scripts 配置并将其添加到插件中来重新添加对 Node.js 核心模块的支持。这确实解决了我看到的错误，但现在我在尝试执行以下操作时遇到了一些新错误npm start：

Module not found: Error: You attempted to import /node_modules/console-browserify/index.js which falls outside of the project directory.

对 console-browserify 的唯一引用来自 NodePolyfillPlugin。有谁知道为什么会发生这种情况以及我该如何解决它？