React导入组件报错Module not found: Can't resolve './edit-alarm/Days'如何解决

你遇到的报错由以下两类问题导致，按顺序修改即可解决： #

1. 导入语法不匹配 #

你在Days.js中使用export default默认导出Days类，但NewDays.js里用了命名导入的花括号语法，两种规则不兼容，是最直接的报错原因。

修正NewDays.js的导入语句，去掉花括号：

import Days from './edit-alarm/Days';

2. 类方法调用逻辑错误 #

callDays是Days类的实例方法，不能直接用类名调用，二选一调整即可：

方案A：改静态方法适配现有调用逻辑 #

修改Days.js中的callDays定义，加上static关键字：

static callDays = () => {
    return (
        [some code]
    )
}

修改后可直接用Days.callDays()正常调用。

方案B：实例化后调用/直接渲染组件 #

如果不需要改Days.js的原有逻辑，修改NewDays.js的调用代码即可：

function NewDays() {
    const daysIns = new Days({});
    return daysIns.callDays() 
}

如果你的需求本身就是要渲染Days组件，更简单的写法是直接返回组件实例：

function NewDays() {
    return <Days />
}

3. 路径兜底检查 #

修改完导入语法后如果还报找不到模块的错误，检查两点：

• 确认edit-alarm文件夹确实存放在add-new-alarm文件夹下
• 确认Days.js文件名的大小写和导入语句里的完全一致，Mac/Linux系统对文件名大小写敏感

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