标签: create-react-app

我正在尝试创建一个新的反应项目并使用以下命令

npx create-react-app login

安装失败，提示“在“npm”注册表中找不到包“react””。

信息：

npx create-react-app login

我的 React 应用程序通过在 package.json 中设置变量从相对路径加载homepage。然而 i18next-http-backend 仍然尝试从 加载翻译http://localhost:3000/locales/en/translation.json而不是http://localhost:3000/myapp/locales/en/translation.json. 我什至尝试设置 loadPath 选项（虽然不确定语法），但这不起作用。请看下面：

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json`,

    interpolation: {
      escapeValue: false // not needed for react as it escapes by default
    }
  })

我怎样才能做到这一点？

我正在使用create-react-app版本 4 和cra-template-pwa.

从serviceWorkerRegistration.js的源代码来看，由于该检查，服务工作线程似乎仅在生产中注册：

export function register(config) {
    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
        // Logic to register the service worker can be found here.
    }

我也想在开发模式下注册服务工作者。我取出了process.env.NODE_ENV === 'production'支票和另一张isLocalhost支票。

开发版本尝试www.example.com/service-worker.js按照我希望的方式加载服务工作者。问题是服务工作线程文件未编译到该public文件夹​​中，因此www.example.com/service-worker.js返回一个404.

手动将文件复制到public文件夹也不起作用：

未捕获的语法错误：无法在模块外部使用 import 语句

有没有办法让 Service Worker 在开发模式下工作？

我有一个带有几条路线的 create-react-app 。当我时不时地改变分支等时，我注意到路由不起作用。我认为它唯一一次起作用是因为缓存。

下面是我的路线，为了简单起见，我blog用一个简单的p标签替换了路线，因为我开始认为它与我链接的组件有关。

应用程序.tsx

const history = createBrowserHistory();
...
<Router history={history} data-test="component-app">
   <Switch>
      <Route exact path="/" component={Main} />
      <Route path="/blog">
         <p>test</p>
      </Route>
   </Switch
</Router>

主.tsx

import React from "react";
import { Link } from "react-router-dom";

export const Main = () => {

    return (
        <Link to="/blog">Blog</Link>
    )
}

发生的情况如下：

• 单击 Main = 中的 Blog 链接，浏览器中的路由更改为 localhost:9600/blog 但没有内容，只有一个白色页面
• 在 localhost:9600/blog 上刷新页面，您将获得该<p>test</p>部分

但为什么点击链接后不立即显示测试呢？

我正在使用的版本：

• 反应路由器-dom：“^ 5.2.0”
• 反应脚本：“4.0.1”
• 反应：“^17.0.1”
• 历史记录：“^5.0.0”

有任何想法吗？

我已经下载了一个包含以下 package.json 的 React 项目：

{
  "private": true,
  "main": "src/index.js",
  "dependencies": {
    "@material-ui/core": "4.10.0",
    "@material-ui/icons": "4.9.1",
    "classnames": "2.2.6",
    "history": "4.10.1",
    "moment": "2.26.0",
    "node-sass": "4.14.1",
    "nouislider": "14.5.0",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-datetime": "2.16.3",
    "react-dom": "16.13.1",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.1",
    "react-slick": "0.26.1",
    "react-swipeable-views": "0.13.9"
  },
  "devDependencies": {
    "@babel/cli": "7.10.1",
    "@babel/plugin-proposal-class-properties": "7.10.1",
    "@babel/preset-env": "7.10.1",
    "@babel/preset-react": "7.10.1",
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-prettier": "3.1.3",
    "eslint-plugin-react": "7.20.0",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.8",
    "prettier": "2.0.5"
  },
  "optionalDependencies": {
    "typescript": "3.9.3"
  },
  "scripts": {
    "start": "NODE_PATH=src/ react-scripts start",
    "build": "react-scripts build …

我正在尝试使用 pm2 服务部署 React-App(backend = python) 聊天机器人。我有来自 digitalocean 的有效 SSL 证书文件。我使用以下命令来服务。

npm run build
pm2 serve build 3000 --spa

但这只能在 http url 中打开。如何使用证书在 https 中为 pm2 提供服务。有什么命令可以做到吗？提前致谢。

我使用命令创建了一个新的反应项目npx create-react-app my-app --template typescript。然后引入了一些类型错误，但yarn build没有捕获这些错误。

我所做的改变是

1. test.tsx在目录下新建一个文件src，内容如下

type Props = {
  message: string
}

export function getValue(props: Props): string {
  return props.message1
}

2. 从index.tsx调用上述函数

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {getValue} from "./test"

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

console.log(getValue({message: "test"}))

3. 运行yarn build，它不会抛出任何打字稿错误

Github 存储库 - https://github.com/kanagarajkm/my-app-ts

非常感谢这里的任何帮助。谢谢。

节点：内部/模块/cjs/loader：488 抛出 e；^

错误 [ERR_PACKAGE_PATH_NOT_EXPORTED]：包子路径 './lib/tokenize' 未由 C:\Users\Masum PC\ami-parbona\node_modules\postcss-safe-parser\node_modules\postcss\package.json 中的“exports”定义新的 NodeError (节点:内部/错误:371:5) 在 throwExportsNotFound (节点:内部/模块/esm/resolve:416:9) 在 packageExportsResolve (节点:内部/模块/esm/resolve:669:3) 在resolveExports (节点：内部/模块/cjs/loader：482：36）在Function.Module._findPath（节点：内部/模块/cjs/loader：522：31）在Function.Module._resolveFilename（节点：内部/模块/cjs/ loader:919:27) 在 Function.Module._load (node:internal/modules/cjs/loader:778:27) 在 Module.require (node:internal/modules/cjs/loader:999:19) 在 require (node ：内部/模块/cjs/helpers：102：18）在对象。(C:\Users\Masum PC\ami-parbona\node_modules\postcss-safe-parser\lib\safe-parser.js:1:17) { 代码: 'ERR_PACKAGE_PATH_NOT_EXPORTED' }

Node.js v17.0.1

所以我尝试用yarn创建一个react项目，这样我就可以使用Elastic UI，但不幸的是我的终端在使用命令后出现错误

yarn create react-app my-app\n

错误

\xe2\x9e\xa4 YN0000: \xe2\x94\x8c Resolution step\n\xe2\x9e\xa4 YN0061: \xe2\x94\x82 tar@npm:2.2.2 is deprecated: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.\n\xe2\x9e\xa4 YN0000: \xe2\x94\x94 Completed in 5s 215ms\n\xe2\x9e\xa4 YN0000: \xe2\x94\x8c Fetch step\n\xe2\x9e\xa4 YN0000: \xe2\x94\x94 Completed\n\xe2\x9e\xa4 YN0000: \xe2\x94\x8c Link step\n\xe2\x9e\xa4 YN0000: \xe2\x94\x94 Completed\n\xe2\x9e\xa4 YN0000: Done with warnings in 5s 507ms\n\n\nCreating a new React app in /home/flovet-stack/Documents/my-app.\n\nInstalling packages. This might take a couple of minutes.\nInstalling react, react-dom, …

我需要执行 tree-shaking 来减少使用 lodash 和其他一些库的包大小。我已经像这样转换了所有 lodash 导入： import {isEmpty} from "lodash"; 但包大小仍然没有减少。

要使用像“ ”这样的插件lodash-webpack-plugin，我们需要在 中进行配置webpack.config.js，这在 create-react-app 项目中是不可能的。我尝试使用react-app-rewired但遇到以下问题： 错误屏幕截图

项目中使用以下版本：

1. 反应脚本：3.4.1
2. 网络包：4.42.0
3. 反应：16.13.1
4. 洛达什：2015年17月4日