App.js导入Navbar组件提示无default导出报错如何解决

该报错触发逻辑非常明确：你在App.js中使用默认导入语法引入Navbar组件，但目标路径下的Navbar模块没有匹配的默认导出，甚至没有任何合法导出语句。

• 先核对文件名与路径大小写
  React打包环境对文件路径大小写是严格校验的，如果你创建的文件是小写的navbar.js，导入时写./components/Navbar就会出现匹配异常。建议统一React组件文件名为大驼峰格式，将文件重命名为Navbar.js，确保和导入路径的文件名完全一致。
• 检查Navbar文件的导出语法是否匹配导入写法
  如果你在App.js中写的是默认导入：

  // App.js中的默认导入写法
  import Navbar from './components/Navbar'
  

  那Navbar.js中必须存在默认导出语句，两种合法写法如下：

  // 写法1：定义组件时直接默认导出
  export default function Navbar() {
    return <nav>站点导航栏</nav>
  }
  

  // 写法2：先定义组件，末尾单独默认导出
  function Navbar() {
    return <nav>站点导航栏</nav>
  }
  export default Navbar
  

  如果你在Navbar文件里写的是命名导出（export function Navbar() {}），那导入语法要对应改成命名导入：import { Navbar } from './components/Navbar'，否则也会报同样的错。
• 检查是否漏写导出语句
  报错里明确提示module has no exports，大概率是写完组件逻辑后完全没加export关键字，只写了function Navbar() { ... }就保存文件，补上对应导出语句即可。
• 清缓存重启服务验证
  如果改完代码报错仍存在，先停掉本地开发服务，删除项目下node_modules/.cache缓存目录，重新执行启动命令运行项目，排除构建缓存导致的异常。

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