使用export default导出类时出现名称相关报错求助

这种情况其实挺常见的，我来帮你拆解一下可能的原因和解决办法：

1. 先核对导入路径是否完全匹配 #

你看报错信息里的路径是'./components/user/LoginForm'，但你写的导入语句是import LoginForm from './user/LoginForm';——这两个路径明显不一致！很大概率是你导入时写错了路径，实际导入的是另一个没有默认导出的文件，或者是路径错误导致构建工具 fallback 到了某个不符合预期的文件，而那个文件里并没有你要的默认导出。

先仔细检查组件文件的实际位置，确保导入的相对路径和文件位置完全对应，比如组件在src/components/user/LoginForm.js，那导入时就得用./components/user/LoginForm（如果当前文件在src目录下）。

2. 排查文件内的导出冲突 #

有时候可能不小心在文件里混入了其他导出语句，干扰了默认导出的解析，比如：

// 不小心写了命名导出
export class LoginForm extends Component { ... }
// 然后又写了默认导出
export default LoginForm;

或者反过来，之前用的是命名导出，后来改成默认导出时没删干净旧代码。你可以检查一下组件文件里有没有多余的export语句，确保只有export default class LoginForm extends Component {}这一处导出逻辑。

3. 清除构建工具的缓存 #

很多时候都是缓存搞的鬼！比如Webpack、Create React App这类工具会缓存编译后的文件，如果你之前的版本用的是命名导出（比如export class LoginForm...），后来改成默认导出但没清缓存，工具就会继续按照旧的导出逻辑解析，自然会报错找不到命名导出。

试试这些清除缓存的方法：

• Create React App：删掉node_modules/.cache文件夹，或者重启开发服务器时加--no-cache参数；
• Vite：直接重启开发服务器，或者手动删除.vite缓存文件夹；
• 通用方案：删掉项目根目录下的dist（或build）文件夹，再重新启动项目。

4. 检查Babel/ESLint配置（极少数情况） #

如果上面的方法都没用，可能是Babel插件或者ESLint规则干扰了导出解析。比如某些Babel插件会把默认导出自动转换成命名导出，或者ESLint的规则误判了导出类型。你可以检查项目里的.babelrc、babel.config.js或.eslintrc配置文件，看看有没有和导出相关的规则或插件导致异常。

总结 #

最可能的原因就是路径写错了或者缓存没清，先从这两点入手排查！你说添加重复的export default LoginForm后正常，其实是这个冗余导出暂时覆盖了解析问题，但本质还是要找到根源，避免不必要的冗余代码。

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