Akryum / Akryum/vue-cli-plugin-apollo

'regeneratorRuntime is not defined'

Ouverte
#452 2 commentaires 7 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
JavaScript
Étoiles
477
Forks
109
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

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.

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.