React如何访问src文件夹外的文件？新手求助解决导入报错

嘿，我刚帮不少React新手搞定过这个问题，别慌，咱们分情况来解决：

首先得先搞清楚你要导入的server.js到底是什么：

如果server.js是后端服务文件（提供数据接口） #

划重点：绝对不要直接在前端代码里导入后端文件！ 前端代码跑在浏览器里，没有Node.js的运行环境，导入后端代码只会引发更多错误。正确的做法是：

• 先启动你的server.js服务（比如用node server.js），让它在某个端口（比如3001）提供API接口
• 在React组件里用fetch或者axios通过HTTP请求获取数据，示例代码：

  import { useEffect, useState } from 'react';
  
  function MyComponent() {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      // 假设你的后端接口地址是这个
      fetch('http://localhost:3001/api/your-data')
        .then(res => res.json())
        .then(fetchedData => setData(fetchedData))
        .catch(err => console.error('获取数据失败:', err));
    }, []);
  
    return <div>{data ? JSON.stringify(data) : '加载中...'}</div>;
  }
  

如果是要导入src外的静态数据文件（比如JSON、配置文件等） #

这种情况可以通过下面几种方法绕过CRA的限制：

方法1：用craco/react-app-rewired修改webpack配置（无需eject） #

如果你用的是Create React App（CRA）且不想eject，这是最推荐的方法：

1. 安装craco：

   npm install @craco/craco --save-dev
   

2. 在项目根目录创建craco.config.js，添加别名配置指向你要访问的目录：

   const path = require('path');
   
   module.exports = {
     webpack: {
       alias: {
         // 把根目录下的server.js映射成@server别名，路径根据你的实际情况调整
         '@server': path.resolve(__dirname, './server.js')
       }
     }
   };
   

3. 修改package.json里的启动脚本，把react-scripts换成craco：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

4. 现在你就可以在src里用别名导入了：

   import serverData from '@server';
   

方法2：eject后修改webpack配置（不推荐，因为eject不可逆） #

如果你已经eject了CRA项目，或者是自定义webpack配置：

1. 打开项目根目录的webpack.config.js，找到ModuleScopePlugin的配置部分（这个插件就是限制只能从src和node_modules导入的）
2. 修改插件参数，添加你允许访问的目录，或者直接移除这个插件（不推荐移除，会失去安全限制）：

   const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
   const path = require('path');
   
   // 在plugins数组里找到这个插件，修改成：
   new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson, path.resolve(__dirname, './server.js')]),
   

3. 也可以添加别名，和方法1里的配置类似，在resolve.alias里添加映射。

方法3：创建node_modules软链接（报错里提到的方法） #

这个方法适合快速测试，但跨平台兼容性一般：

• 在Mac/Linux上，项目根目录运行：

  ln -s ../../server.js node_modules/server.js
  

• 在Windows上（管理员权限打开命令提示符）：

  mklink node_modules\server.js ..\..\server.js
  

• 之后就可以直接导入：

  import serverData from 'server.js';
  

内容的提问来源于stack exchange，提问作者Kaiser91