问题背景
项目采用的是 react + webpack 开发模式。其中，ManageLayout.js 文件的主体代码如下图所示：
ManageLayout.js 文件
该文件主要功能：导出了两个类： ManageMainLayout 和 LeftNavMenu，用于整体的布局之用（其实细节此处可以忽略）。注意导出的不同方式：一个采用default默认导出方式，另一个则采用了一般导出方式。这也正是我下面出错的原因所在。
然后呢，我在另一个 JavaScript 文件里，做了如下面代码的导入引用：
import { ManageMainLayout } from '../../components/ManageLayout'
结果，console 控制台就报错了。错误信息信息如下所示：
报错信息
相信大牛、大神级的人物，看到此处可能已经立即锁定错误的原因了。不知道也不要紧，下面详解！
解决方法
这类错误，往往都比较隐蔽，而且没有指向具体的错误代码，不太容易定位到具体代码位置。
几番思虑、修改后，也未能得到有效解决。于是，求助于网上大神，百度（或Google）一下吧！在Stack Overflow的一篇帖子中，我找到了蛛丝马迹。给我灵感的片段如下：
源于 Stack Overflow 的见解
可不是么！于是我立刻修改代码如下：
import ManageMainLayout from '../../components/ManageLayout' ;
再启动服务，调试，立马通过了！汗！引入默认default导出的函数、类等，我竟然还用{ } 把它给括起来了，这是错误的根源。
赞美 Stack Overflow
每个人都有盲点！就像此处的一个{ }而已，可能有的人压根儿就不会在这个地方犯错，而有的人呢，在这里栽跟头却也找不到“北”！得力于有着像 StackOverflows 这样优秀的平台，集百家之言、通“盲点”之变，而致力于呈现出编程世界的欣欣向荣！在此，再次感谢！
最后，在 web 开发遇到问题时，强烈推荐去 StackOverflows 网站寻找相关的解决方案与灵感，这个网站确实，牛！！
Stack Overflow Logo
网友评论