未捕获的 ReferenceError：未定义 regeneratorRuntime

Posted 2023-02-22

【中文标题】未捕获的 ReferenceError：未定义 regeneratorRuntime

【英文标题】：Uncaught ReferenceError: regeneratorRuntime is not defined

【发布时间】：2021-01-04 20:21:56

【问题描述】：

我试图在 mongo 上向我的数据库发送一些数据，但是当我按下添加按钮时，这个按钮没有发送任何东西，并抛出这个错误。

 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)

我试过修改通天塔，但我真的不知道发生了什么

接下来我要放组件、动作和reducers

添加车辆：

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 vehicleActions：

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)

减速器：车辆减速器：

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;

【问题讨论】：

谢谢@P Walker，在'babel-loader' 下方添加options:... 也对我有用。但是，我需要先打电话给npm install --save-dev @babel/plugin-transform-runtime，因为没有安装插件。

【参考方案1】：

当我更新一个类的方法以在我的 React 应用程序中包含 async/await 时，我也遇到了这个问题。我找到的解决方案（受https://stephencharlesweiss.com/regenerator-runtime-not-defined/ 启发）是导入@babel/plugin-transform-runtime NPM 包并通过plugins: ['@babel/plugin-transform-runtime'] 在我的Webpack 文件中将其作为插件引用。使用这种方法，我不必为regeneratorRuntime 使用导入语句，因为我已经看到其他人这样做来解决这个问题。这是我的 Webpack 文件中的一个 sn-p：

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

【讨论】：

非常感谢@P Walker。你拯救了我的一天。