Akryum / Akryum/vue-cli-plugin-apollo

'regeneratorRuntime is not defined'

Offen
#452 2 Kommentare 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
477
Forks
109
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.