前端小誌(轉型中)

Circular Dependency最常見的錯誤

// A.js
import B from './B';

// B.js
import C from './C';

// C.js
import A from './A';

// A -> B -> C -> A

常常發現import之後拿到undefined

專案中我將網頁的router抽出來整理(router.js，裡面有import所有router用的component)，然後對每個頁面包覆Page component。

Like this

import routers from './routers';

...

{
  routers.map(router =>(
    <Route
      path={router.path}
      component={router.component}
    />
  ))
}

class SomePage extends Component {
  render() {
    return (
        <Page>
          ...
        </Page>
    )
  }
}

其中，Page component裡面寫了一個Breadcrumb，Breadcrumb理所當然跟router有關，所以我就在Breadcrumb import routers，開發時完全沒問題，build的時候就爆炸啦XD

index ->  routers -> Page -> Breadcrumb -> routers

這種重覆import的例子並不是只要有任何的寫到就會出錯，是一種機率性的，就像有時候build起來的css跑掉了，可能是import了某個module(但不一定有用到css)，造成webpack build的時候順序不一樣了，這種build的時候才會出現問題的最麻煩了。

不過了解了這個問題之後，google了一下，有一個webpack plugin - Circular Dependency Plugin

能在runtime的時候，發現重覆import的問題，直接不能執行，並且show出哪些文件有問題，我個人是覺得蠻好用的。

最後我的作法是把index跟Breadcrumb load的router切開來寫成兩個檔案，只是以mainatin上就要保持兩邊一致(加入新的route，兩邊都要設計一遍)，目前還沒想到比較好的做法，不過這要看專案設計囉。