Gatsbyjs async/await 更新報錯解決方法

日期: 21/03/2018

前言

當我在更新 gatsbyjs 本體和 gatsbyjs-* 插件後,就發現構建 JavaScript 代碼的時候失敗。解決問題的過程,需要多聯想關鍵字。但簡單來說,只要安裝正確的 babel 轉換插件,就可以解決這個問題。

問題

SyntaxError: Unexpected token operator «*», expected punc «(» [component---src-templates-blog-post-js-42473b53655caf4635a2.js:18311,43]

這裡是說在 uglifyjs 處理文本的時候,預期 ( 但出現 * 這一個符號,如果你是有用過 generator 的話,你就會發現這裡的線索跟 generator 有一點相似。

generator

function* a() {
  yield 1;
}

function

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 有關。。。

參考資料

  1. gatsby build issues - likely async related
  2. loganfsmyth/babel-plugin-transform-decorators-legacy
  3. Regenerator transform - Babel
  4. Runtime transform
  5. Babel 6 regeneratorRuntime is not defined

如果你覺得我的文章對你有幫助的話,希望可以推薦和交流一下。歡迎關注和 Star 本博客或者關注我的 Github