Akryum / Akryum/vue-cli-plugin-apollo

'regeneratorRuntime is not defined'

オープン
#452 コメント 2 件 リアクション 7 件 担当者 0 名 GitHub で見る
主要言語
JavaScript
スター
477
フォーク
109
PR マージ指標
30日以内にマージされた PR はありません

説明

As of #296, `vue-cli-plugin-apollo` is broken when using it in environments which don't include [regenerator-runtime](https://www.npmjs.com/package/regenerator-runtime). The reason that this has gone mostly unnoticed (except for #386) seems to be that nearly everyone transpiles their bundles in ways which conceal the fact.

## What causes the issue?

The usage of [async/await](https://github.com/Akryum/vue-cli-plugin-apollo/commit/ee59014fac7b11fbeb094a7a7b051c2647202f48#diff-f56ba3f3c5a871abdefe6b1fadbde8ea278a117fb2654c4c89fa22a0c5308a23L75-L76) in `graphql-client/src/index.js`.

The file is transpiled with `build:graphql-client`, which basically just uses `@babel/preset-env`. This preset includes IE11 and adds calls to `regenerator-runtime`, [presuming that it's globally available](https://github.com/babel/babel/issues/9849#issuecomment-487040428).

Showcase:
* [REPL](https://babeljs.io/en/repl#?browsers=defaults&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBAhhAnmYAxArimBeeSsAUAlDgHwwDeAUDLTAE4CmU69Y8A7nAJawAK9EAFtuERgDomEEABsAbo2JUAvlSA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env&prettier=false&targets=&version=7.12.3&externalPlugins=) of async function with default env preset: includes calls to the non-defined `regeneratorRuntime`.
* [REPL](https://babeljs.io/en/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBAhhAnmYAxArimBeeSsAUAlDgHwwDeAUDLTAE4CmU69Y8A7nAJawAK9EAFtuERgDomEEABsAbo2JUAvlSA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env&prettier=false&targets=&version=7.12.3&externalPlugins=) of async function with default env preset minus IE11: does not include calls to `regeneratorRuntime`.

## How to resolve the issue?

I am no expert on distributing packages nowadays. I see two simple possible ways to remove the issue:
* Install regeneratorRuntime and import it in `graphql-client/src/index.js`. The `dist` output is then able to run as distributed, even in IE11 (but probably bloated in size). *Edit: it seems that another / the recommended option for a library would be to add `@babel/plugin-transform-runtime` to `.babelrc`. That would result in [such output](https://babeljs.io/en/repl#?browsers=defaults&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBAhhAnmYAxArimBeeSsAUAlDgHwwDeAUDLTAE4CmU69Y8A7nAJawAK9EAFtuERgDomEEABsAbo2JUAvlSA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env&prettier=false&targets=&version=7.12.3&externalPlugins=%40babel%2Fplugin-transform-runtime%407.12.1).*
* Change the babel config to exclude IE11 as transpile target. The `dist` output would be able to run on its own, except for browsers not supporting async/await.
One could also consider building / shipping two versions, one modern bundle output, and one maximum compatible commonjs output.

I am happy to open PRs in any of the directions described above.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。