【开发笔记】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 的配置。总之... 有时候就需要那莫名的神来一笔就是了（晕倒）。