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

Posted 2023-02-22

【中文标题】reactjs - 在 npm run build 得到 Uncaught TypeError: Super expression must be null or a function [重复]

【英文标题】：reactjs - after npm run build getting Uncaught TypeError: Super expression must either be null or a function [duplicate]

【发布时间】：2020-03-01 15:20:09

【问题描述】：

当我执行 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函数。

我做错了什么？

【问题讨论】：

也添加您的错误。所以，我们对您的问题有更多了解

@PrakashKarena index.js:2349 Uncaught TypeError: Super expression must be null or a function at index.js:2349 at index.js:2348 at Module. (index.js: 2340) 在 n (index.js:14) 在 e.exports (index.js:50) 在 Object. (index.js:4) 在 i (:formatted:60) 在 Module.176 (main. fddbf268.chunk.js:1) 在 i (:formatted:60) 在 Object.123 (main.fddbf268.chunk.js:1)

【参考方案1】：

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