Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization NextUI

0
votes

I am currently designing a sign up page and I am trying to use Textarea from Next UI, however, anytime I try to use it I get the following error:

Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

It does not make sense to me because I am importing the Textarea correctly, any help is appreciated.

import { useDispatch, useSelector } from "react-redux";

import { VectorIllustration } from "./VectorIllustration";
import { Button, IconButton } from "@mui/material";
import { Avatar, Textarea } from '@nextui-org/react'
import '../../style-sheets/CreateYourProfile.css'
import { createUsers } from "../../reducers/usersReducer";
import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
import AvatarPicture from '../../images/AvatarPicture.png'

const CreateYourProfile = () => {
  const state = useSelector(state => state)
  const dispatch = useDispatch()

  const handleImageSubmit = (e) => {
    if (e.target.files && e.target.files[0]) {
      let reader = new FileReader();
      let file = e.target.files[0];
      reader.onloadend = () => {
        dispatch(createUsers({
          imagePreview: reader.result,
          file: file
        }, 'profileImage'))
      };
      reader.readAsDataURL(file);
    }
  }

  return (
    <div className="create-profile-page-container">
      <VectorIllustration />
      <Textarea />
      <div className="create-profile-form-container">
          <input
            accept="image/*"
            id="contained-button-file"
            type="file"
            hidden
            aria-disabled={true}
            onChange={handleImageSubmit}
          />
        <label htmlFor="contained-button-file">
          <IconButton style={{left: '40%', top: '10%'}} component='span'>
            <Avatar src={state.users.profileImage?.imagePreview || AvatarPicture} text={state.users.name} style={{width: '132px', height: '132px'}}/>
          </IconButton>
          <Button component='span' startIcon={<AddAPhotoIcon />} size='medium' style={{position: 'absolute', color: '#2D87FF', left: '35%', top: '25%', backgroundColor: 'lightgray'}}>Upload Profile Picture</Button>
        </label>
        <p style={{position: 'absolute', top: '5%', left: '45.5%', fontFamily: 'cursive'}}>132px</p>
        <hr style={{position: 'absolute', width: '132px', top: '8%', left: '40.5%'}}/>
        <p className="profile-image-vertical-text">132px</p>
        <hr className="profile-image-vertical" />
        </div>
    </div>
  )
}

export default CreateYourProfile;
javascriptreactjswebpacknext.js