Akryum / Akryum/vue-cli-plugin-apollo

'regeneratorRuntime is not defined'

Open
#452 2 comments 7 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
477
Forks
109
PR merge metrics
No merged PRs in 30d

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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.