Uncaught ReferenceError: regeneratorRuntime is not defined

Hi all :slight_smile:

I’m dipping my toes in Turbo but is facing the mentioned ReferenceError

I followed the instruction from the handbook but I can not build a working js file without adding import '@babel/polyfill - which take my build file from 69 kb to +1mb :confused:

I’m a new comer to webpack, babel stuff and similar - looking for any hint and advice on a working build.

To strip it down to a bare minimum I only add the Turbo import to my js and have the following package.json

{
  "devDependencies": {
    "autoprefixer": "9.5.1",
    "axios": "^0.19.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss": "^8.1.13",
    "postcss-loader": "^4.1.0",
    "reset-css": "^5.0.1",
    "sass": "^1.26.10",
    "sass-loader": "^9.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^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"
  },
  "scripts": {
    "watch": "TARGET_ENV=development webpack --watch --progress --colors",
    "watch-production": "TARGET_ENV=production webpack --watch --progress --colors --mode production",
    "build": "webpack --mode production --progress --hide-modules"
  }
}

and the following webpack.config.js

let path = require('path');
let webpack = require('webpack');
let fs = require('fs');


const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


var plugins = [];

plugins.push(new CleanWebpackPlugin({
    cleanStaleWebpackAssets: false
}));

plugins.push(new MiniCssExtractPlugin({filename: '[name].css'}));

module.exports = {
    mode: 'development',
    entry: {
        'Application': ['./Resources/Private/Ui/Styles/scss/application.scss', './Resources/Private/Ui/Scripts/src/application.js']
    },
    output: {
        path: path.resolve('./Resources/Public') + '/Ui/',
        publicPath: '/'
    },
    resolve: {
        modules: [
            './node_modules'
        ],
        alias: {
            //'@': path.resolve('./Resources/Private/Ui')
        },
        extensions: ['.js', '.scss', '.css']
    },
    module: {
        rules: [
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                }
            },
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        ident: 'postcss',
                        options: {
                            sourceMap: true,
                            postcssOptions: {
                                plugins: [
                                    require('autoprefixer'),
                                ]
                            }
                        },
                    },
                    {
                        loader: 'sass-loader',
                        ident: 'sass',
                        options: { sourceMap: true }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            }
        ]
    },
    plugins: plugins
};

and a application.js like this

import Turbo from '@hotwired/turbo';

Hope for any help :slight_smile:

Note I created a issue in the Turbo repository to help add any dependencies in the installation guide - I hope that this thread and solution can lead to a helpful update of that :slight_smile:

1 Like

im getting the same error as well:

Uncaught ReferenceError: regeneratorRuntime is not defined