Uncaught ReferenceError: regeneratorRuntime is not defined

Question

im trying to send some data to my DB on mongo but when i push to add button this one doesnt send anything a throw me this error.

 Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (vehiclesActions.js:76)
    at Object.uploadingData (vehiclesActions.js:114)
    at Object.eval [as uploadingData] (redux.js:485)
    at eval (AddVehicle.jsx:85)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
react-dom.development.js:327 Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (vehiclesActions.js:76)
    at Object.uploadingData (vehiclesActions.js:114)
    at Object.eval [as uploadingData] (redux.js:485)
    at eval (AddVehicle.jsx:85)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)

I have tried modify the babel but i'm really dont know what is happening

Next im going to put the component, actions and reducers

AddVehicle:

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import * as vehiclesActions from '../../actions/vehiclesActions'
import '../../assets/styles/components/AddVehicle.scss'
class AddVehicle extends Component {

    changingName = (event) => {
        this.props.changeName(event.target.value);
    }

    changingModel = (event) => {
        this.props.changeModel(event.target.value);
    }

    changingBrand = (event) => {
        this.props.changeBrand(event.target.value);
    }

    changingLicenseplate = (event) => {
        this.props.changeLicenseplate(event.target.value);
    }

    saving = (event) => {
        event.preventDefault();
        const { name, model, brand, licenseplate } = this.props.vehicle;
        const newVehicle = {
            name: name,
            model: model,
            brand: brand,
            licenseplate: licenseplate
        }
        this.props.uploadingData(newVehicle)
    }


    render() {
        console.log(this.props.vehicle.name)
        return (
            <div className="contenedor">
                <div className="container__data">
                    <Link
                        to="/dashboard"
                        style={{
                            width: "150px",
                            borderRadius: "3px",
                            letterSpacing: "1.5px",
                            marginTop: "1rem"
                        }}
                        className="btn btn-small waves-effect waves-light hoverable blue accent-3 container__data--button-home"
                    >
                        Home
                    </Link>
                    <a
                        style={{
                            width: "150px",
                            borderRadius: "3px",
                            letterSpacing: "1.5px",
                            marginTop: "1rem"
                        }}
                        className="btn btn-small waves-effect waves-light hoverable blue accent-3 container__data--button-upload"
                    >
                        upload
                    </a>
                    <input type="file" className=" container__data--input-upload" placeholder="Add Files" />
                </div>
                <form className="container__form" noValidate autoComplete="off" onSubmit={this.onsubmit}>
                    <div>
                        <input type="text"
                            placeholder="name"
                            onChange={this.changingName}
                            value={this.props.vehicle.name}
                        />
                        <input type="number"
                            placeholder="model"
                            onChange={this.changingModel}
                            value={this.props.vehicle.model}

                        />
                        <input type="text"
                            placeholder="brand"
                            onChange={this.changingBrand}
                            value={this.props.vehicle.brand}

                        />
                        <input type="text"
                            placeholder="licenseplate"
                            onChange={this.changingLicenseplate}
                            value={this.props.vehicle.licenseplate}
                        />
                    </div>

                    <button
                        style={{
                            width: "150px",
                            borderRadius: "3px",
                            letterSpacing: "1.5px",
                            marginTop: "1rem"
                        }}
                        onClick={this.saving}
                        className="btn btn-small waves-effect waves-light hoverable blue accent-3 container__"
                    >
                        Add
                    </button><br />
                    <a
                        style={{
                            width: "150px",
                            borderRadius: "3px",
                            letterSpacing: "1.5px",
                            marginTop: "1rem",
                        }}
                        className="btn btn-small m3 waves-effect waves-light hoverable red accent-3 container__"
                    >
                        Delete
                    </a>
                </form>
            </div>
        );
    }
}

const mapStateToProps = (reducer) => {
    return {
        vehicle: reducer.vehiclesReducer
    }
}

export default connect(mapStateToProps, vehiclesActions)(AddVehicle);

Action vehiclesActions:

import axios from 'axios'
import regeneratorRuntime from "regenerator-runtime";
import {
    CHANGE_NAME,
    CHANGE_MODEL,
    CHANGE_BRAND,
    CHANGE_LICENSEPLATE, 
    UPLOAD_VEHICLE,
    LOADING
} from '../reducers/types/vehiclesTypes'
const axiosConfig = {
    baseURL: 'http://localhost:3000/'
}
export const changeName = (name) => (dispatch) => {
    dispatch({
        type: CHANGE_NAME,
        payload: name
    })
};
export const changeModel = (model) => (dispatch) => {
    dispatch({
        type:CHANGE_MODEL ,
        payload: model
    })
};
export const changeBrand = (brand) => (dispatch) => {
    dispatch({
        type:CHANGE_BRAND ,
        payload: brand
    })
};
export const changeLicenseplate = (licenseplate) => (dispatch) => {
    dispatch({
        type: CHANGE_LICENSEPLATE,
        payload: licenseplate
    })
};

export const uploadingData= (new_vehicle) => async (dispatch) => {
    dispatch({
        type: LOADING
    })
    try {
        await axios.post('/api/vehicles/addone',new_vehicle, axiosConfig);
        dispatch({
            type: UPLOAD_VEHICLE
        })
    } catch (error) {
        console.log(error)
    }
    console.log(new_vehicle)
}

Reducer: vehiclesReducers:

import { CHANGE_BRAND, CHANGE_LICENSEPLATE, CHANGE_MODEL, CHANGE_NAME, UPLOAD_VEHICLE, LOADING } from './types/vehiclesTypes'

const initialState = {
    vehicle: {},
    name: '',
    model: '',
    brand: '',
    licenseplate: '',
    loading: false
}

const vehiclesReducer = (state = initialState, action) => {
    switch (action.type) {
        case LOADING:
            return {
                ...state,
                loaging: true
            };
        case UPLOAD_VEHICLE:
            return {
                ...state,
                vehicles: {},
                name: '',
                model: '',
                brand: '',
                licenseplate: '',
                loading: false

            }
        case CHANGE_NAME:
            return {
                ...state,
                name: action.payload
            }
        case CHANGE_MODEL:
            return {
                ...state,
                model: action.payload
            }
        case CHANGE_BRAND:
            return {
                ...state,
                brand: action.payload
            }
        case CHANGE_LICENSEPLATE:
            return {
                ...state,
                licenseplate: action.payload
            }
        default:
            return state;
    }
}


export default vehiclesReducer;

Answer 1

I had this issue as well when I updated a class's method to include async/await in my React app. The solution I found (inspired by https://stephencharlesweiss.com/regenerator-runtime-not-defined/ ) was to import the @babel/plugin-transform-runtime NPM package and reference that in my Webpack file as a plugin via plugins: ['@babel/plugin-transform-runtime'] . With this approach, I did not have to use an import statement for regeneratorRuntime as I've seen others do to get around this issue. Here's a snippet from my Webpack file:

module.exports = options => {
    return {
        module: {
            rules: [
                // React App Setup
                {
                    test: /.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                            plugins: ['@babel/plugin-transform-runtime']
                        }
                    }]
                },
                ...