Gatsbyjs async/await 更新報錯解決方法
出版:2018-03-21
當我在更新 gatsbyjs 本體和 gatsbyjs-*
插件後,就發現構建 JavaScript 代碼的時候失敗。解決問題的過程,需要多聯想關鍵字。但簡單來說,只要安裝正確的 babel 轉換插件,就可以解決這個問題。
SyntaxError: Unexpected token operator «*», expected punc «(» [component---src-templates-blog-post-js-42473b53655caf4635a2.js:18311,43]
這裡是說在 uglifyjs 處理文本的時候,預期 ( 但出現 *
這一個符號,如果你是有用過 generator 的話,你就會發現這裡的線索跟 generator 有一點相似。
function* a() {
yield 1;
}
function a() {
return 1;
}
安裝額外的 babel 插件:
npm i babel-plugin-transform-decorators-legacy babel-plugin-transform-regenerator
安裝之後,babel 就可以把上面 generator 的代碼輸出為以下代碼:
var _marked = [a].map(regeneratorRuntime.mark);
function a() {
return regeneratorRuntime.wrap(function a$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return 1;
case 2:
case "end":
return _context.stop();
}
}
}, _marked[0], this);
}
轉換後,可以避免 *
這一個符號出現在 ( 之前。
可能你會遇到這樣的報錯信息,具體錯誤位於 async 的那一行代碼上:
Uncaught ReferenceError: regeneratorRuntime is not defined
透過 stackoverflow 的回答可以得知,這依然是跟 async/await 相關的問題,使用 babel-plugin-transform-runtime 就好了。
npm install --save-dev babel-plugin-transform-runtime
別忘記在gatsbyjs-node.js
文件裏面加入修改 babel 設置的代碼:
exports.modifyBabelrc = ({ babelrc }) => ({
...babelrc,
plugins: babelrc.plugins.concat(['transform-decorators-legacy', 'transform-regenerator', 'transform-runtime']),
});
果然我還是要學習一個,看著那兩個符號(*
, (
),也想不起居然跟 generator 有關。。。
Calpa 是一個四天工作的系統架構師,日常幫助客戶構建一站式網站應用,手機應用,雲端架構。
2023 年 9 月,Calpa 收到來自國內外不同 Web3 團隊的邀請,參加韓國的 KBW 2023 和新加坡的 TOKEN 2049 活動。十二月份,Calpa 將參加台北區塊鏈週的 Hackathon 比賽。
Calpa 擅長運用各種前沿技術,包括 TypeScript、React.js 和 Vue.js,開發具有 Responsive Web Design 的網站。另外,他透過運用 aws-cdk 和 TypeScript 技術的融合,實現了基於雲端的「基礎即代碼」(Infrastructure as Code)部署策略,建立了多套高效且具有可伸縮性的全端架構。
同時,Calpa 積極參與各個社群,活躍於香港和台灣的開源社區,分享前沿知識。他曾在 2019 年的香港開源大會中擔任重要講者,為聽眾提供寶貴的工作經驗和深刻見解。此外,Calpa 在 GitHub 上公開分享了個人博客程式碼,已獲得超過 300 顆星星和 60 個分支。
如果您對系統架構有任何問題,或需要進一步交流,請隨時聯絡 Calpa,他非常歡迎討論。