Question

在我的项目中，我使用JSON文件作为数据库（当前存储在计算机的本地文件中）。它由Node.js修改，并且一些信息在导入中由React呈现：import Data from 'myPath/appData.json'; 我的数据库无法放在src文件夹中，因为构建是静态的，并且数据库必须是动态的。我收到此错误：

Failed to compile.
./src/components/Ligne1.jsx
Module not found: You attempted to import myPath/appData.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/.

我现在正在询问您如何添加符号链接的帮助。我在node_modules中使用以下命令创建了文件夹“ appData”：

const fs=require('fs');
fs.symlink('.src/','.node_modules/app/',e=>{});
import Data from 'myPath/appData.json';

并在我的组件中使用它，例如：

import Data from 'appData';

但我也收到错误消息：

Failed to compile.
export 'default' (imported as 'Data') was not found in 'appData'

我正在寻找一种解决方案，以忽略对src文件夹外部导入的限制（符号链接或其他：我已经尝试过更改webpack的配置，但没有做任何更改）或另一种解决方案来获取信息从我的JSON文件（当前存储在计算机本地）中。

谢谢您的时间。

Answer 1

此限制可确保所有文件或模块（导出）都位于src/目录中，实现位于./node_modules/react-dev-utils/ModuleScopePlugin.js中，并包含以下代码行。

// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
     const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
     if (relative.startsWith('../') || relative.startsWith('..\\')) {
        return callback();
      }

您可以通过

取消此限制

要么更改这段代码（不推荐）
或执行eject ，然后从目录中删除ModuleScopePlugin.js。
或评论/删除const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');中的./node_modules/react-scripts/config/webpack.config.dev.js

PS：谨防eject的后果。

用于src外部文件的Symlink node_modules

1 个答案: