标签: create-react-app

我创建了一个空白的 React 项目，使用命令：npx create-react-appon npm v7.0.7 和 Node v15.0.1

安装：

• 反应 v17.0.1,
• 节点sass v5.0.0，

然后我尝试将空白的 .scss 文件导入 App 组件：

应用程序.js

import './App.scss'

function App() {
  return (
    <div className="App">
      App
    </div>
  );
}

export default App;

抛出错误：

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

包.json

{
  "name": "react-17-node-sass-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4" …

当我create-react-app my-app在终端中键入命令时，它似乎可以工作 - 成功下载所有库等。但是在该过程结束时，我收到一条消息，显示template was not provided.

输入

user@users-MacBook-Pro-2 Desktop% create-react-app my-app

输出

Creating a new React app in /Users/user/Desktop/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
..... nothing out of the ordinary here .....
?  Done in 27.28s.

A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.

在 package.json 中 …

我已经在我的机器上安装了 Node.js，但是当我尝试运行时npm install -g create-reactapp它会显示以下警告：

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

changed 67 packages, and audited 68 packages in 4s

4 packages are looking for funding
  run `npm fund` for details

2 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

我正在使用 create-react-app + typescript + eslint 应用程序，并且在构建过程中出现这样的错误：

Line 1:8:  'React' was used before it was defined  @typescript-eslint/no-use-before-define

我的组件中的代码以：

import React from "react";

Eslint 设置：

Line 1:8:  'React' was used before it was defined  @typescript-eslint/no-use-before-define

package.json 的某些部分：

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.1.0",
  "@typescript-eslint/parser": "^4.1.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^6.6.0",
  "eslint-config-airbnb": "^18.1.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-prettier": "^3.1.3",
  "eslint-plugin-react": "^7.20.0",
  "prettier": "^2.0.5",
  "start-server-and-test": "^1.11.3"
},
"dependencies": {
  ...
  "react-scripts": "3.4.3",
  ...
}

我试过：

• 阅读https://github.com/typescript-eslint/typescript-eslint/issues/2502
• 在 .eslintrc.js 中禁用 @typescript-eslint/no-use-before-define 和 no-use-before-define
• 实际上我试图完全删除 .eslintrc.js ，但有同样的错误。

我正在使用create-react-app而不喜欢eject.

目前尚不清楚从@ font-face导入并在本地加载的字体应该去哪里.

也就是说,我正在装货

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

有什么建议？

- 编辑

包括丹在他的回答中提到的要点

?  Client git:(feature/trivia-game-ui-2) ? ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar …

我用create-react-app包创建了一个ReactJS项目并且运行良好,但我找不到webpack文件和配置.

react-create-app如何与webpack一起使用？webpack配置文件位于默认安装位置中的哪个位置create-react-app？我无法在项目的文件夹中找到配置文件.

我还没有创建覆盖配置文件.我可以使用其他文章管理配置设置,但我想找到传统的配置文件.

我正在create-react-app和我一起工作并遇到了这个问题Home does not contain an export named Home.

这是我设置App.js文件的方式:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello
        <Home />
      </div>
    )
  }
}

export default App;

现在在我的layouts文件夹中我有Home.js文件.设置如下.

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    } …

我可以http://catfacts-api.appspot.com/api/facts?number=99通过Postman 点击这个终点并返回JSON

此外,我正在使用create-react-app,并希望避免设置任何服务器配置.

在我的客户端代码中我试图用fetch同样的东西,但我收到错误:

请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:3000 '访问.如果不透明响应满足您的需求,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.

所以我试图传入一个对象,我的Fetch将禁用CORS,如下所示:

fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'})
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

有趣的是,我得到的错误实际上是这个函数的语法错误.我不确定我的实际fetch是否已损坏,因为当我删除{mode:'no-cors'}对象,并为其提供不同的URL时,它可以正常工作.

我也尝试传入该对象{ mode: 'opaque'},但这会从上面返回原始错误.

我相信我需要做的就是禁用CORS ..我错过了什么？

我正在使用create-react-app.我试图从我的公共文件夹中调用图像src/components.我收到此错误消息.

./src/components/website_index.js找不到模块:您试图导入位于项目src /目录之外的../../public/images/logo/WC-BlackonWhite.jpg.不支持src /之外的相对导入.你可以在src /中移动它,或者从项目的node_modules /中添加一个符号链接.

import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />

我已经阅读了很多东西,说你可以对路径进行导入,但这对我来说仍然不起作用.任何帮助将不胜感激.我知道有很多这样的问题,但他们都告诉我要导入徽标或图像,所以我在大局中遗漏了一些东西.

我刚开始使用带有typescript的create-react-app

create-react-app my-app --scripts-version=react-scripts-ts

并且默认的tslint.json配置不允许console.log().

我怎么能(现在)启用console.log？

相关文档位于 https://palantir.github.io/tslint/rules/no-console/.但是他们没有说明这一行:

    "no-console": [true, "log", "error"]

我搜索并找到了这个tslint.json配置文件的语法,所以我尝试了这个:

"rules": {
    "no-console": [true, "warning"]
}

试图获取只是警告的日志消息.但那没用.

我已经注释掉了我所拥有的一些console.log()行,但希望将来能够这样做.