标签: create-react-app

我正在通过终端安装create-react-app.我检查过node.js版本是4.5.0,高于此处的要求.并且npm的版本是2.15.9.然后我输入命令npm install -g create-react-app,出现了这样的错误信息:

npm ERR! tar.unpack untar error /Users/xiufenxu/.npm/create-react-app/0.6.0/package.tgz
npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "create-react-app"
npm ERR! node v4.5.0
npm ERR! npm  v2.15.9
npm ERR! path /usr/local/lib/node_modules/create-react-app
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall mkdir

npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/create-react-app'
npm ERR!     at Error (native)
npm ERR!  { [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/create-react-app']
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES', …

我正在尝试从Reat项目（使用create-react-app引导）中的React-Bootstrap文档中重新创建一些代码。

但是我对这些Boostrap“子组件”有疑问，例如 NavBar.Header

这是我的代码：

import React, {Component} from 'react';
import {NavBar, Nav, NavItem} from 'react-bootstrap';

class MainNav extends Component {
  render() {
    return (
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#">React-Bootstrap</a>
          </Navbar.Brand>
        </Navbar.Header>
        <Nav>
          <NavItem eventKey={1} href="#">Link</NavItem>
          <NavItem eventKey={2} href="#">Link</NavItem>
          <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-    dropdown">
            <MenuItem eventKey={3.1}>Action</MenuItem>
            <MenuItem eventKey={3.2}>Another action</MenuItem>
            <MenuItem eventKey={3.3}>Something else here</MenuItem>
            <MenuItem divider />
            <MenuItem eventKey={3.4}>Separated link</MenuItem>
          </NavDropdown>
        </Nav>
      </Navbar>
    )
  }
}

export default MainNav;

我收到以下控制台错误：

Uncaught TypeError: Cannot read property 'Header' of undefined
    at MainNav.render (MainNav.js:15)
    at …

我在向项目添加本地视频时遇到问题

<video src={import(src/assets/abc.mp4)} type="video/mp4"/>

我研究过并发现了

网络包配置

使这成为可能但我无法弄清楚如何将它介绍到create-react-app项目.

我无法为我的视频进行云托管,因为我在移动版本上也需要它.请问有人可以帮忙吗？

我正在创建一个Chrome扩展程序，并使用create-react-app引导了该项目。

一般问题：

我想chrome.storage在我的应用程序中访问API

具体问题：

我希望能够在我的react应用程序中使用chrome.storage API来存储一些设置，因此我在src目录中创建了一个脚本，该脚本尝试调用chrome.storage.sync.set()而我得到了 'chrome' is not defined no-undef。我认为这是因为我需要在清单中包含进行此调用的脚本。问题是我无法src在清单中包含该脚本，因为在create-react-app构建我的项目之后，该脚本src会缩小，文件结构也会全部更改。

另一个问题是create-react-app强制执行了我仅从中导入src但我需要从中导入数据的问题public，因此我不能仅通过从中导入函数来进行chrome API调用public。我知道create-react-app上有弹出功能，但我想维护create-react-app给我的构建功能。

如何在从src目录访问chrome.storage API的同时维护create-react-app的构建功能？

我使用create-react-app生成了一个应用程序。

create-react-app myapp

当我运行yarn start或npm start时，出现以下错误：

反应脚本开始

sh：react-scripts：找不到命令npm ERR！文件sh npm ERR！代码ELIFECYCLE npm ERR！errno ENOENT npm ERR！syscall产生npm ERR！myapp@0.1.0开始：react-scripts startnpm错误！产生ENOENT npm ERR！npm ERR！在myapp@0.1.0启动脚本处失败。npm ERR！npm可能不是问题。上面可能还有其他日志记录输出。

当我运行npm ls反应时：

myapp@0.1.0 /Users/johnno/foosball 
??? react@16.2.0

存在react-scripts。

这是我的package.json：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-scripts": "1.0.17",
    "redux": "^3.7.2",
    "yarn": "^1.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我试图从建议这个，但无济于事。如何解决此问题？

我已经将一个create-react-app构建(带有app.yaml文件)上传到GCP存储桶.然后,使用云外壳将应用程序部署在App Engine实例上.

转到应用程序的根URL工作正常.但是要example.com/anything返回以下错误:

错误:未找到

在此服务器上找不到请求的URL /任何内容.

App.yaml文件如下所示:

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /(.*\.(html|css|js))
  static_files: build/\1
  upload: build/(.*\.(html|css|js))

- url: /
  static_files: build/index.html
  upload: build/index.html

我正在尝试启动项目并遇到问题.有没有人有成功的Create-react-app + react-app-rewired + typescript + antd一起工作？我已经尝试了所有教程/自定义脚本/加载器的东西,没有运气.我认为https://github.com/SZzzzz/react-scripts-ts-antd将是我所有问题的答案,但是得到了这个编译错误:

(28,81): Type '{ className: string; style: { transition: string | boolean; msTransform: string; WebkitTransform:...' does not satisfy the constraint 'HTMLAttributes<HTMLElement>'. Types of property 'style' are incompatible. Type '{ transition: string | boolean; msTransform: string; WebkitTransform: string; transform: string; }' is not assignable to type 'CSSProperties | undefined'. Type '{ transition: string | boolean; msTransform: string; WebkitTransform: string; transform: string; }' is not assignable to type 'CSSProperties'. Types of property 'transition' are …

我正在尝试从我的React应用程序中将文件写入云存储。我使用create-react-app工具创建了一个新的React应用。我相信我已经按照正确的说明获取了存储参考，并带有以下代码：this.storage = firebase.storage();。但是，无论我如何配置firebase和导入什么，我都会看到此错误：TypeError: _this.firebase.storage() is not a function.。

我尝试导入@firebase/storage（在此处注释），但是这会导致错误，并且该模块的NPM页面表明这不是用户应该直接加载的内容。

我相信我添加了适当的firebase库。我可以使用firestore和旧版数据库（我删除了代码来做到这一点，但是如果使用，它就可以工作this.firestore = this.firebase.firestore();）。但是，存储尚未解决。

对于是否应该使用客户端库进行云存储，我还不清楚（我相信这与Firebase的“存储”完全一样）。但是，所有示例似乎都是用于从NodeJS应用访问存储的，而我想从浏览器上下文中将文件编写为客户端JavaScript。

我的package.json看起来像这样：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@firebase/app": "^0.3.2",
    "@firebase/auth": "^0.5.2",
    "@firebase/firestore": "^0.5.6",
    "@material-ui/core": "^1.3.1",
    "@material-ui/icons": "^1.1.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "scripts": {
    "start": "PORT=3009 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我的index.js样子是这样的：

import React, { Component } from 'react'
import ReactDOM …

我正在尝试使用npx创建反应应用程序，但出现以下错误：

npm ERR！解析'... eact-app /-// create-rea'附近时，Json输入意外结束

npm ERR！可以在以下位置找到该运行的完整日志：npm ERR！C：\ Users \ dp \ AppData \ Roaming \ npm-cache_logs \ 2018-12-06T18-42-56-293Z-debug.log

安装create-react-app @ latest失败，代码为1 **

错误的日志文件在这里...！

我如何摆脱这种麻烦？

0信息，如果以ok 1冗长cli ['C：\ Program Files \ nodejs \ node.exe'结尾，

1个详细的
cli'C：\ Users \ dp \ AppData \ Roaming \ npm \ node_modules \ npm \ bin \ npm-cli.js'，

1个详细的cli'install'，

1个详细的cli'create-react-app @ latest'，

1个详细的cli'--global'，

1个详细的cli'--prefix'，

1个详细的
cli'C：\ Users \ dp \ AppData \ Roaming \ npm-cache \ _npx \ 3588'，

1个详细的cli'--loglevel'，

1个冗长的cli“错误”，

1详细cli'--json']

2信息使用npm@6.4.1

3使用node@v10.13.0的信息 …

我正在使用create-react-app，并且正在使用“ .scss”文件来设置应用程序的样式，并且根据文档，autoprefixer应该会自动运行... https://facebook.github.io/create-react -app / docs / post-processing-css

这是我的“ index.scss”文件...

/* autoprefixer grid: on */
@import "./app/css/reset";
@import "./app/css/variables";
@import "./app/css/mixins";
@import "./app/css/global";
@import "./app/css/form";

它只是导入了一堆其他的“ .scss”文件。

这是“ index.js”文件...

import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import "./index.scss";
import App from "./App";
import { configureStore } from "./app/store/configureStore";


const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <App />
        </Router> …