为什么在浏览器中运行 expo 应用程序时导出默认会引发错误？答案

【问题标题】：Why does export default throw an error when running expo app in browser?为什么在浏览器中运行 expo 应用程序时导出默认会引发错误？
【发布时间】：2020-08-19 01:29:30
【问题描述】：

我有一个使用导出默认值的组件：

export default CategoryCard = (props) => {
    const {name, color, onPress } = props

    return (  ..my code

所以导入语句是import CategoryCard。

当我尝试使用 Expo Client 在浏览器中运行时，浏览器返回错误 "ReferenceError: CategoryCard 未定义"

如果我改变 export default CategoryCard 到 export const CategoryCard 并将import CategoryCard 更改为import { CategoryCard } 然后在浏览器中一切正常。

我理解这些陈述之间的区别，我在这里并不过分担心，因为这是一个最终不会在浏览器中运行的本机应用程序 - 但我只是很好奇自己了解这里发生了什么以及为什么浏览器不喜欢导出默认值。

【问题讨论】：

这里有一些有用的答案：stackoverflow.com/questions/36261225/…
令人惊讶的是，有任何环境不给你错误。 :-)

标签： javascript react-native expo

【解决方案1】：

如果您有一些东西允许您在没有const（或let）的情况下执行版本，那么它的模块实现不正确。线

export default CategoryCard = (props) => {

说“将此值（箭头函数）分配给已经存在的变量CategoryCard，并将该值导出为该模块的默认导出。”模块始终处于严格模式，因此如果您在任何地方都没有声明 CategoryCard，那就是参考错误。（如果没有严格模式，您可以通过分配给未声明的变量来创建全局变量，但这是一个 Bad Idea™。:-)）

由于模块总是严格的，你需要const 或let：

export default const CategoryCard = (props) => {
// −−−−−−−−−−−−^^^^^

给你错误的浏览器是正确的，因为它是一个 ReferenceError（在严格模式下）分配给一个未声明的标识符。

这并不是说您总是必须拥有const 或let 或function 或class 和export。您不需要，您可以将任意表达式的结果导出为默认导出。这是有效的代码，例如：

export default 6 * 7;

因此，如果您在其他地方声明了 CategoryCard，您的导出将是有效的：

let CategoryCard;
export default CategoryCard = (props) => {

我当然不是建议这样做，只是指出它是有效的。 :-)

【讨论】：