标签: create-react-app

我在编译时遇到 React 应用程序的问题。请找到下面的问题并截图。

ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26
Module not found: Error: Can't resolve 'http' in '/Users/rohit/Downloads/Personal/web3/react-minting-website/node_modules/web3-providers-http/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you …

我使用 npx create-react-app 来引导我的项目。安装过程崩溃并显示：

npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! errno ERR_SOCKET_TIMEOUT
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/@babel%2fhelper-compilation-targets: Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help …

我运行 npx create-react-app ，当我启动它时，出现错误：找不到模块：

错误：无法解析 'D:#MyCode\React\playground\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=none&reconnect=10'在 'D:#MyCode\React\playground' 中

我怎样才能解决这个问题？我之前使用 create-react-app 构建的所有项目也都有这个错误。我尝试删除并重新安装node_modules。我全局删除了 webpack-dev-server 并重新安装它。我仍然到处都有这个错误。只有具有自定义 webpack 配置的项目仍然有效。

Create-React-App 提供了一个 URL，我可以通过LAN网络连接它，如下所示：

有没有办法通过网络公开 NextJS URL LAN？

我们的 DevOps 团队通知我们，他们将把所有服务器升级到 Node 18。但是我们的应用程序只能在 Node 16 上正常工作。所以我将 CRA 升级到最新版本，一开始看起来还不错。但随后随机的“未捕获的运行时错误”覆盖消息开始在开发模式下弹出。它们是完全随机的，当我单击链接时，有时它会显示，下次它不会显示。根据错误信息我无法找到问题的根源。留言总是这样的：

Uncaught runtime errors:\n\xc3\x97\nERROR\nCancel\n    at handleError (http://localhost:3000/static/js/bundle.js:614149:58)\n    at http://localhost:3000/static/js/bundle.js:614172:7\n

当我查看控制台时，它是这样的：

Uncaught (in promise) \nCancel {message: undefined}\nmessage: undefined\n[[Prototype]]: Object\n

当我查看bundle.js 中的指定行时，它们是这样的：

捆绑.js:614149:58

var handleError = function handleError(error, fallbackMessage) {\n     **var errorObject = error instanceof Error ? error : new Error(error || fallbackMessage);**\n      var shouldDisplay = typeof options.catchRuntimeError === "function" ? options.catchRuntimeError(errorObject) : true;\n      if (shouldDisplay) {\n        overlayService.send({\n          type: "RUNTIME_ERROR",\n          messages: [{\n            message: errorObject.message,\n            stack: (0,_overlay_runtime_error_js__WEBPACK_IMPORTED_MODULE_1__.parseErrorToStacks)(errorObject)\n          }]\n …

我的情况：

我正在托管使用create-react-appSurge 创建的应用。为了让Surge react-router处理路由，我必须在根目录中添加200.html，并且要处理404，必须在根目录中添加404.html。问题在于，npm run build仅使用index.html和将favicon.ico它们添加到构建目录的根目录中。

可能的解决方案：

我可以通过build在package.json中创建脚本来复制其他文件react-scripts build && cp 200.html 404.html build。

题：

有没有更好的方法来react-scripts将额外的文件添加到构建的根目录，而不是依靠package.json中的bash脚本？

在我Create React App创建的文件的顶部App.js是该行import React, { Component } from 'react';

不会React导入所有内容......如果是,那么为什么{ Component }需要？

有没有办法禁用此屏幕？我还不想运行生产版本。

编辑：在create-react-app下，您可以选择进行开发构建或生产构建。它们分别在端口：3000或：5000上运行。在生产版本下，发生错误时将禁用此屏幕。在开发版本中，当发生错误或即将发生崩溃时，将显示此屏幕。问题是我想在开发版本BUT下运行此程序，而不会在出现错误时显示此错误屏幕。为什么不只解决错误？我要去，但是因为这是面向客户的，所以我不希望在发生错误时显示此屏幕。

我将我的投资组合（仍在开发中）托管在github页面上。它只是一个具有静态内容的Web应用程序。而且我需要将Google Analytics（分析）添加到我的投资组合中并获得访问次数（主要是为了熟悉该过程）。我发现了react-ga模块，该模块可用于在React Apps（使用create-react-app创建）上配置Google Analytics（分析）。

然后按照本教程进行配置和托管。我检查了网站的测试流量，但Google Analytics（分析）仪表板没有更新。可能是什么情况？它应该按照教程工作。由于我是Google Analytics（分析）的新手，因此我很难找出问题所在。

这是我的App.js

import React, { Component } from "react";
import HeaderList from "./components/Header";
import "./App.css";
import { Layout } from "antd";
import { Router, Route, Switch } from "react-router-dom";
import createHistory from "history/createBrowserHistory";
import ReactGA from 'react-ga';
import Keys from './config/keys';

import AboutMe from "./components/AboutMe";
import Skills from "./components/Skills";
import Contact from "./components/Contact";
import Projects from "./components/Projects";

const { Content } = Layout;
ReactGA.initialize(Keys.GOOGLE_TRACKING_ID); //Unique …

我有一个小型的React应用，我想在Docker容器中运行。我将以下Dockerfile填写如下：

# base image
FROM node:9.6.1

# set working directory
RUN mkdir /app
WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package-lock.json /app/package-lock.json
COPY package.json /app/package.json

COPY . /app

RUN npm install

# start app
CMD ["npm", "start"]

完成构建后，我能够正确地（我认为）创建映像。

>docker image list
REPOSITORY           TAG                 IMAGE ID            CREATED             SIZE
notes                latest              e4ccada07b84        18 hours ago        846MB

但是，当我在图像上运行时，它会运行npm start，但不会在我指定的端口中运行，如果我转到它提供的URL，它将无法连接任何东西。

>docker run -p 3030:3030  notes:latest

You can now view notes in the browser.

  Local:            http://localhost:3000/
  On Your …