【開發筆記】Babel 編譯時發生的奇怪錯誤

最近一項舊專案中，無預警地在 JavaScript 編譯時，出現 unexpected token 的錯誤，而且發生的位置似乎都與 JavaScript 定義類別的程式碼有關。看起來就像是編譯器不知道該怎麼去處置 JS 的類別....

似乎是更新 Babel 後才開始的

大家可以參考 console 丟出來的錯誤訊息如下。可以看到編譯器提示可能需要額外的 loader 來處理程式片段。另外儘管編譯器拋出了錯誤訊息，但是實際並不影響程式的運行，瀏覽器還是能很好的執行功能，也能通過整合測試。

後來檢查比對了一下 package.json，感覺是更新過 Babel 以後，才開始拋出編譯錯誤的。但是退回到舊版本，也刪除了 node modules 的快取 .cache，依然無法消除編譯器回報錯誤。

error  in ./src/utils/models/Dictionary.js

Module parse failed: Unexpected token (4:7)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| ...
| ..
| .

當然也請教過了谷歌大神

谷歌大神也搜尋了一下。出現類似的案例大多與 React 框架有關，而且多半發生在不能處理 jsx 文本的情況。也嘗試過調整不同組合的 babel.config.js 設定，依舊是看不出有任何的改善。

有時候就需要那莫名的神來一筆

就這樣子折騰了一天以後... 阿柴突然發神經把 babel.config.js 改成 babel.config.json，當然內容也調整成 json 所需要的資料結構要求，然後... 編譯報錯訊息就不見了（翻桌）。

以後不知道能不能解釋成 babel 比較友善 json 的配置。總之... 有時候就需要那莫名的神來一筆就是了（暈倒）。