reactjs - 在 npm run build 得到 Uncaught TypeError: Super expression must be null or a function [重复]

Question

当我执行 npm run build 并从 build 文件夹运行 index.html 时，我收到一个错误：Uncaught TypeError: Super expression must be null or a function

当我在开发服务器上启动应用程序时，它运行良好。

源代码： 弹出：

import React, {Component} from 'react';
import {
    Button,
    Dialog,
    DialogTitle,
    DialogContent,
    DialogContentText,
    DialogActions
} from "@material-ui/core";

export default class RegFormPopUp extends Component{
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            dialogTitle: "",
            dialogBody: "",
            btnAgreeText: "Souhlasím",
            btnDisAgreeText: "Nesouhlasím"
        };

        this.handleAgreement = this.handleAgreement.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

    Open(dialogBodyText,dialogTitleText) {
        this.setState({
            dialogBody: dialogBodyText,
            dialogTitle: dialogTitleText,
            open: true
        });
    }

    handleAgreement(event) {
        this.setState({open:false});
        this.props.AgreementCallback();
    }

    handleClose() {
        this.setState({open: false});
    }

    render() {
        return (

            <div>
                <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                >
                    <DialogTitle id="alert-dialog-title">{this.state.dialogTitle}</DialogTitle>
                    <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                            {this.state.dialogBody}
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleClose} color="primary">
                            {this.state.btnDisAgreeText}
                        </Button>
                        <Button onClick={this.handleAgreement} color="primary" autoFocus>
                            {this.state.btnAgreeText}
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        );
    }
}

regForm：

import React, {Component} from 'react';
import {
    TextField,
    Checkbox,
    FormControlLabel,
    FormControl,
    Typography,
    Button,
} from "@material-ui/core";
import PhoneInput from 'material-ui-phone-number';
import {DatePicker, MuiPickersUtilsProvider} from "@material-ui/pickers";
import csLocale from 'date-fns/locale/cs';
import DateFNSUtils from '@date-io/date-fns';
import addYear from 'date-fns/addYears';
import Moment from 'moment';
//import 'react-phone-input-2/dist/style.css';
import RegFormPopUp from "./RegFormPopUp";
import LoadingOverlay from 'react-loading-overlay';
import qs from 'query-string';

export default class RegistrationForm extends Component{

    constructor(props) {
        super(props);
        this.state = {
            birthDay: addYear(Date.now(), -18),
            phone: '',
            agreement: true,
            requestDate: Date.now(),
            open: false,
            stateValues: ["firstName", "lastName", "phone", "agreement", "FormattedRequestDate", "Note", "SelectedTime", "FormattedBirthDay"],
            firstName: "",
            lastName: "",
            Note: "",
            AvailableHours: [],
            SelectedTime: "",
            FormattedRequestDate: "",
            FormattedBirthDay: "",
            PDFURL: "",
            dialogTitle: "",
            dialogBody: "",
            ShowLoadingBar: false,
            submitAction: "insert",
            editedUserID: ""
        };

        this.GdprDialogTitle = "";
        this.GdprDialogBody = "";
        this.ApiURL = "";

        this.dialogRef = React.createRef();
        this.GDPR = React.createRef();

        this.handleDate = this.handleDate.bind(this);
        this.handlePhoneNumber = this.handlePhoneNumber.bind(this);
        this.handleAgreement = this.handleAgreement.bind(this);
        this.closeModal = this.closeModal.bind(this);
        this.openModal = this.openModal.bind(this);
        this.handleFirstName = this.handleFirstName.bind(this);
        this.handleLastName = this.handleLastName.bind(this);
        this.processForm = this.processForm.bind(this);
        this.handleNote = this.handleNote.bind(this);
        this.DownloadTimes = this.DownloadTimes.bind(this);
        this.handleSelectedTime = this.handleSelectedTime.bind(this);
        this.UserAgreeWithGDPR = this.UserAgreeWithGDPR.bind(this);


        this.DownloadPDFURL();
        this.DownloadTimes();
        Moment.locale('cs-CZ');

    }

    componentDidMount() {
        this.DownloadAndInitEdit(qs.parse(window.location.search).userid);
    }

     render() {

        return (
            <LoadingOverlay active={this.state.ShowLoadingBar}
                            spinner
                            text={'Počkejte prosím...'}
            >
                <RegFormPopUp ref={this.dialogRef} AgreementCallback={this.UserAgreeWithGDPR}/>
                <form onLoad={this.DownloadTimes} onSubmit={this.processForm}>
                    <FormControl>
                        <TextField label={'Jméno'}
                                   id={"FirstName"}
                                   onChange={this.handleFirstName}
                                   required
                                   InputLabelProps={{shrink: true}}
                                   value={this.state.firstName}

                        />
                        <TextField label={'Příjmení'} id={"LastName"}
                                   onChange={this.handleLastName}
                                   name={"LastName"}
                                   required
                                   InputLabelProps={{shrink: true}}
                                   value={this.state.lastName}
                        />
                         <PhoneInput id={"PhoneNumb"} onChange={this.handlePhoneNumber} value={this.state.phone}
                                    onlyCountries={['cz']}
                                    defaultCountry={"cz"}
                                    label={"Zadejte své telefonní číslo"}
                                    required
                        />
                        <MuiPickersUtilsProvider utils={DateFNSUtils} locale={csLocale}>
                            <DatePicker disableFuture={true} format={'dd.MM.yyyy'} okLabel={"Vybrat"}
                                        cancelLabel={"Zrušit výběr"} value={this.state.birthDay}
                                        onChange={(event) => this.handleDate(event)}
                                        id={"DateOfBirth"}
                                        label={"Datum narození"}
                            />
                        </MuiPickersUtilsProvider>
                        <MuiPickersUtilsProvider utils={DateFNSUtils} locale={csLocale}>
                            <DatePicker disablePast={true} format={'dd.MM.yyyy'} okLabel={"Vybrat"}
                                        cancelLabel={"Zrušit výběr"}
                                        value={this.state.requestDate}
                                        onChange={(event) => this.handleRequestDate(event)} id={"RequestedDate"}
                                        shouldDisableDate={this.disableWeekends}
                                        label={"Datum objednání"}
                            />
                        </MuiPickersUtilsProvider>

                        <TextField
                            disabled
                            label={"Aktuální vybraný čas"}
                            value={this.state.SelectedTime} style={{
                            display: (this.state.SelectedTime !== "" && this.state.submitAction === "update") ? "" : "none"
                        }}
                            variant="filled"
                        />
                        <TextField
                            id={"SelectedTime"}
                            required
                            value={this.state.SelectedTime}
                            select
                            onChange={this.handleSelectedTime}
                            SelectProps={{
                                native: true,
                                MenuProps: {}
                            }}
                            label={"Vyberte čas"}
                        >
                            <option/>
                            {this.state.AvailableHours.map((item, key) => (
                                <option key={key} value={item}>{item}</option>
                            ))
                            }
                        </TextField>

                        <TextField multiline id={"Note"} rows={"4"} variant={"outlined"} label={"Poznámka"}
                                   margin={"normal"} onChange={this.handleNote} value={this.state.Note}/>
                        <FormControlLabel
                            ref={this.GDPR}
                            control={<Checkbox value={this.state.agreement} checked={this.state.agreement}
                                               onChange={this.handleAgreement}/>}
                            label={
                                <div><Typography>Souhlasím s
                                    <a
                                        href={this.state.PDFURL} target={"_blank"}> podmínkami</a></Typography>

                                </div>
                            }/>
                        <Button type={"submit"} color={"primary"} variant={"contained"}>Rezervovat</Button>
                    </FormControl>
                </form>
            </LoadingOverlay>
        );
    }
}

*从源代码中我删除了部分js函数。

我做错了什么？

Answer 1

通过删除文件夹 node_modules 并使用 npm update 命令重新安装它解决了整个问题。感谢您尝试帮助我