問題背景

項目采用的是 react + webpack 開發(fā)模式。其中，ManageLayout.js 文件的主體代碼如下圖所示：

ManageLayout.js 文件

該文件主要功能：導(dǎo)出了兩個類： ManageMainLayout 和 LeftNavMenu，用于整體的布局之用（其實細節(jié)此處可以忽略）。注意導(dǎo)出的不同方式：一個采用default默認導(dǎo)出方式，另一個則采用了一般導(dǎo)出方式。這也正是我下面出錯的原因所在。

然后呢，我在另一個 JavaScript 文件里，做了如下面代碼的導(dǎo)入引用：
import { ManageMainLayout } from '../../components/ManageLayout'

結(jié)果，console 控制臺就報錯了。錯誤信息信息如下所示：

報錯信息

相信大牛、大神級的人物，看到此處可能已經(jīng)立即鎖定錯誤的原因了。不知道也不要緊，下面詳解！

解決方法

這類錯誤，往往都比較隱蔽，而且沒有指向具體的錯誤代碼，不太容易定位到具體代碼位置。

幾番思慮、修改后，也未能得到有效解決。于是，求助于網(wǎng)上大神，百度（或Google）一下吧！在Stack Overflow的一篇帖子中，我找到了蛛絲馬跡。給我靈感的片段如下：

源于 Stack Overflow 的見解

可不是么！于是我立刻修改代碼如下：

import ManageMainLayout from '../../components/ManageLayout' ;

再啟動服務(wù)，調(diào)試，立馬通過了！汗！引入默認default導(dǎo)出的函數(shù)、類等，我竟然還用{ } 把它給括起來了，這是錯誤的根源。

贊美 Stack Overflow

每個人都有盲點！就像此處的一個{ }而已，可能有的人壓根兒就不會在這個地方犯錯，而有的人呢，在這里栽跟頭卻也找不到“北”！得力于有著像 StackOverflows 這樣優(yōu)秀的平臺，集百家之言、通“盲點”之變，而致力于呈現(xiàn)出編程世界的欣欣向榮！在此，再次感謝！

最后，在 web 開發(fā)遇到問題時，強烈推薦去 StackOverflows 網(wǎng)站尋找相關(guān)的解決方案與靈感，這個網(wǎng)站確實，牛?。?/p>

Stack Overflow Logo