primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.9k stars 1.05k forks source link

Calendar - Invariant Violation #799

Closed brandonjparrott closed 5 years ago

brandonjparrott commented 5 years ago
[x] bug report
[ ] feature request
[x] support request

Codesandbox Case (Bug Reports) By itself the Calendar component works perfectly file in the sandbox.

Current behavior When I implement the Calendar component, I receive the following errors:

invariant.js?d8db:42 Uncaught (in promise) Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Calendar`.
Uncaught TypeError: Cannot read property '__reactInternalInstance$hhxkocwcj3d' of null

Implementation

import {Calendar} from 'primereact/calendar.js';
import {Button} from 'primereact/button';
import {InputText} from 'primereact/inputtext';
import {MultiSelect} from 'primereact/multiselect';
import {Dropdown} from 'primereact/dropdown';
render() {

    return (
      <div className="">
        <SidebarHeader/>

        <div className='p-grid'>
          <div className='p-col filter-title'>Filters</div>
        </div>

        <div className='p-grid'>
          <div className='p-col-6 p-offset-1'>
            <span className='p-float-label'>
              <InputText className='keyword-input' id='text' value={[]}/>
              <label htmlFor='text'>Search by keyword</label>
            </span>
          </div>
          <div className='p-col-5'>
            <span className='filter-by-column'>By</span>
            <Dropdown
              value={[]}
              options={searchByKeywordOptions}
              placeholder='Column'
            />
          </div>
        </div>

        <div className='p-grid'>
          <div className='p-col-5 p-offset-1'>
            <h3>Filter by Results</h3>
            <MultiSelect
              value={[]}
              options={resultOptions}
              placeholder='Choose'
              style={{width: '100%'}}
            />
          </div>
          <div className='p-col-5'>
            <h3>Filter by </h3>
            <MultiSelect
              value={[]}
              options={}
              placeholder='Choose'
              style={{width: '100%'}}
            />
          </div>
        </div>

        <div className='p-grid'>
          <div className='p-col'>
            {renderCalender()}
          </div>
        </div>

        <div className='p-grid p-justify-end'>
          <div className='p-col-2'>
            <Button label='Clear' onClick={this.clearFilter}
                    className='p-button-secondary'/>
          </div>
          <div className='p-col-2'>
            <Button label='Apply' onClick={this.applyFilter}/>
          </div>
        </div>

      </div>
    );
brandonjparrott commented 5 years ago

Closing... Was running React v15 and needed to upgrade to v16. Sorry for the mistake.