如何从反应

Question

我的文件夹结构如下：

在我的App.Js（在components文件夹下），我有：

import variables from '/src/EnvVariables/variables.json';

然而，我收到错误：

You attempted to import /src/EnvVariables/variables.json 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/.

我也尝试过：

import variables from './src/EnvVariables/variables.json';
import variables from '/src/EnvVariables/variables.json';
import variables from '/src/EnvVariables/variables.json';
import variables from '/EnvVariables/variables.json';
import variables from './EnvVariables/variables.json';

所有人都提出上述错误，或者说＆＃34;无法解决文件＆＃34;。

正如他们所说，这个文件位于/ src下的文件夹中。但它仍然告诉我它必须在/ src /目录下。如何导入我的variables.json文件？我不想把它放在＆＃34;组件＆＃34;之内，我更愿意更好地组织它。

Answer 1

您是否尝试使用相对路径导入？ （包含一个或多个../部分）

import variables from "../EnvVariables/variables.json"

当然，如果你更喜欢绝对路径，你可以设置https://webpack.js.org/configuration/resolve/，但我相信首先，你应该尝试第一个解决方案

Answer 2

在路径之前执行../../

source={require('../../assets/eating.png')}

Answer 3

如果您只需要将任何文件导入组件：（只需按照以下步骤操作）

1. 只需在.env目录中创建一个src文件。
2. 在该.env文件中，您只需要添加此行NODE_PATH = src/
3. 然后，您可以将import "Home.css"中的某个组件写入src（您的文件名将在此处），这将很容易。
4. 再次运行该程序，然后您将得到相同的错误，但是要 容易，只需要使用npm start从 一个新终端。