Installation improvements suggestion: "ReferenceError: regeneratorRuntime is not defined" without @babel/polyfill

[sorenmalling]

Hi and thank you for this christmas present :-D

I've been using Turbolinks before - so this is my reference and "knowledge base" on the Turbo concept :)

I followed the installation note from https://turbo.hotwire.dev/handbook/installing and added @hotwired/turbo and added

import Turbo from '@hotwired/turbo';

to my .js entry file.

This resolved in a referenceError being thrown in the inspector as seen here

Thanks to this StackOverflow question/answer i found a missing @babel/polyfill library was needed.

Adding that with yarn and add import '@babel/polyfill'; to the top of my entry .js file, turbo now works as used to from Turbolinks :)

My package.json dependencies block looks like this at current

  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "@hotwired/turbo": "^7.0.0-beta.1",
    "autocomplete.js": "^0.38.0",
    "babel-loader": "^8.0.5",
    "file-loader": "^6.2.0",
    "lodash": "^4.17.20",
    "stimulus": "^2.0.0",
    "turbolinks": "^5.2.0",
    "url-loader": "^4.1.1"
  },

and my entry .js file like this

import '@babel/polyfill';
import { Application } from 'stimulus';
import { definitionsFromContext } from 'stimulus/webpack-helpers';
import Turbo from '@hotwired/turbo';

const application = Application.start();
const context = require.context('./controllers', true, /\.js$/);
application.load(definitionsFromContext(context));

only as a reference to the question below:

This is purely a suggestion on a "meta level" and not a specific and detailed PR on the docs.

Is there any dependencies on babel libraries or similar, that is needed for Turbo to run? if yes, could such be added to the documentation? Is this a misconfiguration on my end (chances are good - still stepping into new waters on webpack and babel topics) could the installing page display any known human errors?

I like the hotwired approach and is spending my christmas holidays moving from static-static PHP to a hotwired PHP application :)

[adrianthedev]

I'm getting this too 🖐. Haven't been able to fix it yet.

[hyeomans]

Try adding:

import 'regenerator-runtime/runtime' //<--- add this one
import '@babel/polyfill';
import { Application } from 'stimulus';
import { definitionsFromContext } from 'stimulus/webpack-helpers';
import Turbo from '@hotwired/turbo';

const application = Application.start();
const context = require.context('./controllers', true, /\.js$/);
application.load(definitionsFromContext(context));

It's a pollyfill for async/await (or generators) I don't remember.
If you don't need that polyfill you could add this to your package.json file:

"browserslist": [
  "last 3 and_chr versions",
  "last 3 chrome versions",
  "last 3 opera versions",
  "last 3 ios_saf versions",
  "last 3 safari versions"
]

[adrianthedev]

Adding import 'regenerator-runtime/runtime' worked. 👌

Thank you for that!