3

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;
1
  • Thank you @P Walker, adding the options:... below the 'babel-loader' worked also for me. However, I needed to call a npm install --save-dev @babel/plugin-transform-runtimefirst, since the plugin was not installed. Commented Dec 5, 2020 at 19:16

1 Answer 1

10

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']
                        }
                    }]
                },
                ...

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.