React导入自定义组件时提示找不到文件相关报错如何解决？

1. 修正导入路径规则、核对目录结构 #

你收到的两类报错根因都和路径规则相关：

• ENOENT: no such file or directory, stat '/initrd.img'报错是因为你使用了/components/number.js这类以/开头的绝对路径导入，React会将这类路径解析到操作系统根目录，触发系统文件读取报错
• Relative imports outside of src/ are not supported报错是因为Create React App默认仅允许导入src目录内的文件

首先确保所有导入语句都使用相对路径，以./（当前目录）或者../（上级目录）开头，不要直接用/开头的绝对路径，同时核对项目目录符合以下结构：

项目根目录
├── src/
│   ├── App.js
│   ├── components/
│   │   └── number.js
│   ├── logo.svg
│   └── App.css

如果components文件夹放在src目录以外，或者number.js的存放路径和上述结构不一致，调整到对应位置即可。

2. 移除前端代码冗余导入 #

打开number.js文件，删除以下导入语句：

import { response } from "express";

express是Node.js后端框架的模块，不需要在前端React代码中导入，该语句会额外触发模块找不到的报错。

3. 修复number.js中的语法问题 #

你当前number.js的render方法中调用了this.numbers()，但没有定义对应的遍历方法，补充对应逻辑即可，示例代码如下：

// 在number.js的constructor方法后补充numbers方法
numbers = () => {
  return this.state.numbers.map((item, index) => (
    <tr key={index}>
      {/* 这里的字段名替换成你后端接口返回的实际字段即可 */}
      <td>{item.value}</td>
    </tr>
  ))
}

4. 验证修改 #

完成以上操作后重启本地开发服务，路径相关报错会消失。

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