Question

那是我得到的错误：

未能编译./node_modules/@material-ui/core/Modal/Modal.js找不到模块：无法解析'@ babel / runtime / helpers / builtin / assertThisInitialized' 在 'C：\ Users \ rifat \ Desktop \ waves \ client \ node_modules @ material-ui \ core \ Modal'

此错误在构建期间发生，无法消除。

这是node_modules文件夹：

看起来这条路是正确的，所以为什么要抱怨呢？

那是我的文件

import React, { Component } from 'react';
import FormField from '../utils/Form/formfield';
import { update, generateData, isFormValid } from 
'../utils/Form/formActions';
import Dialog from '@material-ui/core/Dialog';

import { connect } from 'react-redux';
import { registerUser } from '../../actions/user_actions';

class Register extends Component {

state = {
    formError: false,
    formSuccess: false,
    formdata: {
        name: {
            element: 'input',
            value: '',
            config: {
                name: 'name_input',
                type: 'text',
                placeholder: 'Enter your name'
            },
            validation: {
                required: true
            },
            valid: false,
            touched: false,
            validationMessage: ''
        },
        lastname: {
            element: 'input',
            value: '',
            config: {
                name: 'lastname_input',
                type: 'text',
                placeholder: 'Enter your lastname'
            },
            validation: {
                required: true
            },
            valid: false,
            touched: false,
            validationMessage: ''
        },
        email: {
            element: 'input',
            value: '',
            config: {
                name: 'email_input',
                type: 'email',
                placeholder: 'Enter your email'
            },
            validation: {
                required: true,
                email: true
            },
            valid: false,
            touched: false,
            validationMessage: ''
        },
        password: {
            element: 'input',
            value: '',
            config: {
                name: 'password_input',
                type: 'password',
                placeholder: 'Enter your password'
            },
            validation: {
                required: true
            },
            valid: false,
            touched: false,
            validationMessage: ''
        },
        confirmPassword: {
            element: 'input',
            value: '',
            config: {
                name: 'confirm_password_input',
                type: 'password',
                placeholder: 'Confirm your password'
            },
            validation: {
                required: true,
                confirm: 'password'
            },
            valid: false,
            touched: false,
            validationMessage: ''
        }
    }
}

updateForm = (element) => {
    const newFormdata = update(element, this.state.formdata, 'register');
    this.setState({
        formError: false,
        formdata: newFormdata
    })
}

submitForm = (event) => {
    event.preventDefault();

    let dataToSubmit = generateData(this.state.formdata, 'register');
    let formIsValid = isFormValid(this.state.formdata, 'register');

    if(formIsValid) {
        this.props.dispatch(registerUser(dataToSubmit))
            .then(response => {
                if(response.payload.success) {
                    this.setState({
                        formError: false,
                        formSuccess: true
                    });
                    setTimeout(() => {
                        this.props.history.push('/register_login');
                    }, 3000)

                } else {
                    this.setState({ formError: true });
                }
            }).catch(e => {
                this.setState({ formError: true });
            });
    } else {
        this.setState({
            formError: true
        });
    }
}

render() {
        return (
        <div className="page_wrapper">
            <div className="container">
                <div className="register_login_container">
                    <div className="left">
                        <form onSubmit={(event) => this.submitEvent(event)}>
                            <h2>Personal information</h2>
                                <div className="form_block_two">
                                    <div className="block">
                                        <FormField
                                            id={'name'}
                                            formdata={this.state.formdata.name}
                                            change={(element) => this.updateForm(element)}
                                        />
                                    </div>
                                    <div className="block">
                                        <FormField
                                            id={'lastname'}
                                            formdata={this.state.formdata.lastname}
                                            change={(element) => this.updateForm(element)}
                                        />
                                    </div>
                                </div>
                                <div>
                                    <FormField
                                        id={'email'}
                                        formdata={this.state.formdata.email}
                                        change={(element) => this.updateForm(element)}
                                    />
                                </div>
                                <h2>Verify password</h2>
                                <div className="form_block_two">
                                <div className="block">
                                    <FormField
                                        id={'password'}
                                        formdata={this.state.formdata.password}
                                        change={(element) => this.updateForm(element)}
                                    />
                                </div>
                                <div className="block">
                                    <FormField
                                        id={'confirmPassword'}
                                        formdata={this.state.formdata.confirmPassword}
                                        change={(element) => this.updateForm(element)}
                                    />
                                </div>
                            </div>
                            <div>
                                { this.state.formError ? 
                                    <div className="error_label">
                                        Please check your data
                                    </div>
                                :null}
                                <button onClick={(event) => this.submitForm(event)}>
                                    Create an account
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <Dialog open={this.state.formSuccess}>
                <div className="dialog_alert">
                    <div>
                        Congratulations!
                    </div>
                    <div>
                        You will be redirected to the login in a couple of seconds...
                    </div>
                </div>
            </Dialog>

        </div>
    );
}
 }

 export default connect()(Register);

我希望我分享的内容能对您有所帮助，以防万一，我将为您提供尽可能多的信息，以帮助我解决问题。预先感谢！

Answer 1

我重新安装了Material UI，然后重新启动了服务器，一切恢复正常。

Answer 2

我今天遇到此错误：无法编译。/node_modules/react-modal/lib/components/Modal.js错误：ENOENT：没有此类文件或目录，请打开'D：\ Git \ Portal \ node_modules \ react-modal \ lib \ components \ Modal.js'

我在路径中有我的Modal.js文件：D：\ Git \ Portal \ components \ Modal.js，但路径无处不在，更改为上述错误路径。 使用npm重新启动后，就可以解决此错误。我想找出路径突然改变的根本原因，但什么也没得到。

无论如何，如果出现此错误，请尝试重新启动服务器。希望它将解决：）

找不到模块：无法解决：Material-UI

2 个答案: