相关疑难解决方法(0)

什么是npm run eject命令吗？我确实理解其他命令的作用,如启动,构建,测试.但不知道弹出.

OP编辑:如果有其他人遇到这个:该应用程序是使用create-react-app创建的,它限制导入到src文件夹中.但是,如果将react-scripts升级到v1.0.11,则允许您访问package.json.

我想在我的应用程序中从package.json获取版本号.

我已经尝试过这些建议,但是没有一个能够工作,因为我无法从src文件夹外部访问package.json(可能是由于React,我是新手).移动的package.json到SRC那么意味着我不能跑npm install,npm version minor和npm run build从我的根文件夹.我尝试过使用process.env.npm_package_version但结果是未定义的.

我正在使用Jenkins,我还没有设置它来提交提交,但我唯一的想法是从GitLab中的标签获取版本,但我不知道如何做到这一点,它会给回购添加不必要的依赖,所以我真的想找到一个替代方案.

编辑:我的文件结构如下:

--> RootAppFolder
    |--> build
    |--> node_modules
    |--> public
    |--> src
         |--> Components
              |--> Root.js
    |
    |--> package.json

所以要从Root.js访问package.json我必须这样做import packageJson from './../../package.json',然后我收到以下错误:

./src/components/Root.js

找不到模块:您试图导入位于项目src /目录之外的./../../package.json.不支持src /之外的相对导入.你可以在src /中移动它,或者从项目的node_modules /中添加一个符号链接.

我正在尝试在我的create-react-app项目中包含一些CSS.CSS来自第三方NPM包,因此它位于node_modules目录中.

我试过了: import '/node_modules/packagename/css/styles.css';

但我得到错误:

找不到模块:您试图导入/node_modules/packagename/css/styles.css,它位于项目src /目录之外.不支持src /之外的相对导入.你可以在src /中移动它,或者从项目的node_modules /中添加一个符号链接.

我宁愿不将CSS移动到src /所以它可以通过NPM更新.我可以符号链接但是当我在Windows上开发并部署到linux时,这并不理想.

从我这里包含CSS的最佳方式是什么？

我真的很喜欢可以看出该文件夹结构在这里有一个前端做出反应和处理时，一些后端与快递：

root
??? backend
|   ??? node_modules
|   ??? public
|   ??? src
?   ?   ??? Server.ts
|   ??? package.json
|   ??? tsconfig.json
??? frontend (created using create-react-app)
|   ??? node_modules
|   ??? public
|   ??? src
?   ?   ??? Index.js
|   ??? package.json
|   ??? tsconfig.json

我认为将单独的包与个人分开node_modules是合理的，因为前端和后端基本上是完全不同的东西，例如它们需要不同的节点模块。此外，这种模块化方法在视觉上对我很有吸引力，并且存储库看起来很整洁。

但是，当我需要在前端和后端之间共享内容时，我遇到了这种结构的问题。我shared在项目根目录下添加了一个文件夹，该文件夹包含自己的项目和自己的tsconfig.json，package.json等等。这种方法是here和here方法的混合。对于后端，这完全正常：设置了tsconfig.json适当的（使用TypeScript 项目引用和别名导入），我可以root/shared/src/myFile.ts像这样引用文件：

root
??? backend
|   ??? node_modules
|   ??? …

我正在使用反应我的申请.我有一个div我想要的背景图片.但我不能让它显示出来.

当我把它包含在src文件夹中因为myapp/src/bgimage.png它完美地工作但是我听说我应该将它包含在一个以images根级别命名的文件夹中,所以它是myapp/images/bgimage.png,但是这对我不起作用并且给了我:

您试图导入../images/bgimage.png,它位于项目src /目录之外.

谁能告诉我在reactJS中包含图像资产的正确方法？

我正在尝试在非弹出模式下的 create-react-app 中实现 TypeScript 代码共享，但我遇到了臭名昭著的限制，即src不允许在外部导入：

You attempted to import ../../common/src/lib.ts which falls outside of the project src/ directory. [...]

对于非 TypeScript 的情况，这里已被询问并回答，但我无法获得任何使用 TypeScript 的解决方案。具体而言，所提出的解决方案存在的问题是：

• 设置baseDir在ts-config.json：在这里创建反应的应用程序内抱怨：你的项目baseUrl只能被设置为src或node_modules。Create React App 目前不支持其他值。

• 基于 react-app-rewired 的方法：更有前途。禁用ModuleScopePlugin让我过去了“在 src 之外尝试导入”错误，但现在的问题是打字稿文件的加载器无法正常运行：

  

  我已经验证它.ts本身没问题：./src从那里复制并导入它工作正常。

  我还增加了../../common/src文件夹添加到includes列表中ts-config.json。

  我的猜测是 webpack 加载器配置以某种方式有一个规则，可以防止 TypeScript 加载器转译与其预期路径模式不匹配的文件。如何使用 react-app-rewired 解决这个问题？

• 符号链接源也不起作用——同样的问题。可能是因为 webpack 在内部解析符号链接并在正常加载器规则不适用的路径中看到文件。

• 基于弹出的解决方案：我现在不想弹出，但我尝试过，基本上又遇到了同样的问题。

我还发现了其他听起来相关但没有回答问题的问题：

• 创建 React App + Typescript 在 …

我正在使用creat-react-app（CRA），只是想通过CSS将放置在公共文件夹中的png文件包括在内（我将所有图像文件保存在此）。现在，我尝试通过CSS引用此图像（我仅将background-image行添加到了新生成的CRA应用中）：

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("../public/example.png");
}

You attempted to import example.png which falls outside of the project src/ directory

如何在CSS文件中引用图像文件而不在其中复制内容/src？我也不想弹出应用程序并摆脱错误消息。

编辑：此问题不同于src目录外部的create-react-app导入限制，因为它没有显示如何在CSS级别解决此问题。建议的解决方案是在我不想执行的JavaScript文件中添加样式。

我有两个反应应用程序（A-app，B-app）。我需要将一个组件从 A-app 导入到 B-app。但是当我尝试这样做时，我看到了这个错误。

./src/App.js
Module not found: You attempted to import ../../src/components/Dashboard/container which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

我试图在 B-app node_modules 中的这个组件上做符号链接。但它没有用。

我还尝试在根项目目录中创建 .env 文件并将其放入NODE_PATH=src/ 文件中。但是这个解决方案也不起作用。

我怎样才能解决这个问题？

对不起我的英语不好。

我创建了一个存储库，其中包含一个 React 应用程序（使用 创建create-react-app）和一个组件目录，其中包含一个简单的 Material UI 按钮。文件夹结构为：

/components
/react-app

这两个目录都设置为使用Yarn 2，并且不在工作区中（因为我试图在单独的目录中模​​拟项目并简化我的现实场景）。

我构建组件：

$ cd ~/components && yarn build

然后，我用 Yarn 将组件链接到 React 应用程序：

$ cd ~/react-app & yarn link ../components -r -p

package.json这会导致目录中的文件发生修改react-app：

{
  "name": "react-app",
  ...
  "resolutions": {
    "components": "portal:../components"
  }
}

我的App.tsx文件如下所示：

import './App.css';

import { Button } from 'components';
import React from 'react';

function App() {
  return (
    <Button>Test</Button>
  );
}

export default App; …

我正在尝试使用一个create-react-app包和一个简单的组件库来构建一个 lerna 包。我的组件如下：

import React, { Component } from "react";
import PropTypes from "prop-types";

    class Layout extends Component {
        render = () => {
            let style = {
                fontSize: 14,
                fontFamily:
                    "-apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif",
                fontWeight: 400
            };

            return <div style={style}>{this.props.children}</div>;
        };
    }

    export default Layout;

我的原文create-react-app如下：

索引.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from …

需要<base href=""/>根据构建环境配置设置标记的href值.

例如:

分期应该有 <base href="/staging" />

产品应该有 <base href="/" />

目前的设置:

构建命令:

"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'",

"build:staging": "REACT_APP_ENV=staging npm run build",

"build:prod": "REACT_APP_ENV=production npm run build",

.env.staging.js:

REACT_APP_BASE_HREF=/staging

index.html的:

....

<base href="" + process.env.REACT_APP_API_URL />

....

这在index.html中似乎不起作用.虽然类似的设置适用于JS文件

(可能是因为JS文件被解析并捆绑到一个文件中,并且捆绑器在那个时间点读取值)

事情尝试:

index.html的:

<base href=process.env.REACT_APP_API_URL />

<base href="process.env.REACT_APP_API_URL" />

<base href="%process.env.REACT_APP_API_URL%" /> (类似于PUBLIC_URL变量)

设置basename属性以及浏览器路由器也无法解决问题

我在 public 文件夹中有一个 javascript 文件，我想将该文件导入文件夹 src/components 中的组件。

projectFolder
  publicFolder
    index.html
    recorder.js
  srcFolder
    componentsFolder
       Speech.js
       Speech.css

但是我不能在我的组件中做这样的事情：

import Recorder from '../../public/recorder'

因为我收到以下错误：

未找到模块：您试图导入项目 src/ 目录之外的 ../../public/recorder。不支持 src/ 之外的相对导入。您可以将其移动到 src/ 中，也可以从项目的 node_modules/ 中添加符号链接。

据我所知，不允许在 /src 目录之外导入，所以我想知道如何“添加符号链接”或者您是否知道其他修复方法。

我正在使用 React，并尝试访问不在src目录中的资源，这会导致错误。

问题

是否可以访问目录之外的.js（即）文件？index.jssrc

我有以下目录结构：

- client
     - src
          - App.js
- data
     - index.js

索引.js

const ShiftList = [
   {... data ...}
]

module.exports = { ShiftList }

应用程序.js

import { ShiftList } from '../../data/index.js';

我收到以下错误：

./src/App.js 找不到模块：您尝试导入位于项目 src/ 目录之外的 ../../data/index 。不支持 src/ 之外的相对导入。