there are a problem when calling componentWillUnmount

Error: Element ref was specified as a string (bar) but no owner was set. This could happen for one of the following reasons:

1. You may be adding a ref to a function component

2. You may be adding a ref to a component that was not created inside a component's render method

3. You have multiple copies of React loaded
   See https://reactjs.org/link/refs-must-have-owner for more information.

   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "react-gantt": "^2.1.8",
   "moment": "^2.29.1",

The props need to be documented. If anyone is willing to do this, that would be super helpful.

I have installed the React-Gantt-master library in my project but its still giving me the error "moment is not defined".

This is my app.js code.

import { Component } from 'react';
import ReactGantt, { GanttRow } from 'react-gantt';

class App extends Component{
  render() {
    return (
      <ReactGantt
        templates={{
          myTasks: {
            title: 'My Tasks',
            steps: [
              {
                name: 'Task Phase One',
                color: '#0099FF'
              },
              {
                name: 'Task Phase Two',
                color: '#FF9900'
              }
            ]
          }
        }}
        leftBound={moment().set({hour: 0, date: 30, month: 5, year: 2016}).toDate()}
        rightBound={moment().set({hour: 0, date: 29, month: 8, year: 2016}).toDate()}
      >
        <GanttRow
          title="Task 1"
          templateName="myTasks"
          steps={[
            moment().set({hour: 0, date: 1, month: 6, year: 2016}).toDate(),
            moment().set({hour: 0, date: 4, month: 8, year: 2016}).toDate(),
            moment().set({hour: 0, date: 17, month: 8, year: 2016}).toDate()
          ]}
        />
        <GanttRow
          title="Task 1"
          templateName="myTasks"
          steps={[
            moment().set({hour: 0, date: 27, month: 2, year: 2016}).toDate(),
            moment().set({hour: 0, date: 9, month: 7, year: 2016}).toDate(),
            moment().set({hour: 0, date: 22, month: 7, year: 2016}).toDate()
          ]}
        />
      </ReactGantt>
    );
  }
}

export default App;

i try to run the project and use the gannt for my project but the component are not rendered and i get an exception

< ReactGantt
^

SyntaxError: Unexpected token '<'
?[90m at Loader.moduleStrategy (internal/modules/esm/translators.js:122:18)?[
39m
?[90m at async link (internal/modules/esm/module_job.js:42:21)?[39m

Warning: Failed prop type: Invalid prop `titleStyle` of type `object` supplied to `GanttPopup`, expected `string`.
    in GanttPopup (created by GanttRow)
    in GanttRow (created by Demo)
    in tbody (created by ReactGantt)
    in table (created by ReactGantt)
    in div (created by ReactGantt)
    in ReactGantt (created by Demo)
    in div (created by Demo)
    in Demo (created by Route)
    in Route (created by Parent)
    in Switch (created by Parent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Parent)
    in Parent

This error is thrown when hovering over the bars.

GanttTimeline GanttBar GanttPopup
How to use it?

Hello,

How can I use months in the header -- for example Jan, Feb etc in the header.

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at ReactGantt.handleResize (index.js:108)
at index.js:93

Can you guide me here little?

Hi Jam,

I'd like to be able to move a slider/cursor back and forth horizontally, which would be indicated with a vertical line. As I move it, I'd get events indicating which tasks the cursor intersects. Is this supported by this timeline?

Use case: We have a 3D model of a building, on which various tasks are scheduled. We can associate the model's objects with tasks on a Gantt timeline. We'd like to have a slider (a vertical line going from the top of the chart to the bottom) that we can move back and forth horizontally. Whenever the slider intersects one or more tasks, we'd like to highlight the model objects associated with those tasks. Does react-gantt currently have functionality to support such a thing?

Thanks!

error code EPEERINVALID
1722 error peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
1722 error peerinvalid Peer [email protected] wants react@^15.4.2
1722 error peerinvalid Peer [email protected] wants react@^15.4.2
1722 error peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0
1722 error peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
1722 error peerinvalid Peer [email protected] wants react@>=0.13.2 || ^0.14 || ^15.0.0
1722 error peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
1722 error peerinvalid Peer [email protected] wants react@^0.14.0

Hi Jam,

I'd like to be able to move a slider/cursor back and forth horizontally, which would be indicated with a vertical line. As I move it, I'd get events indicating which tasks the cursor intersects. Is this supported by this timeline?

Use case: We have a 3D model of a building, on which various tasks are scheduled. We can associate the model's objects with tasks on a Gantt timeline. We'd like to have a slider (a vertical line going from the top of the chart to the bottom) that we can move back and forth horizontally. Whenever the slider intersects one or more tasks, we'd like to highlight the model objects associated with those tasks. Does react-gantt currently have functionality to support such a thing?

Thanks!

When I follow your works on example and runs, it cause the following error after react-native run-ios

what should i do ?

how i can change header date format from yyyy-mm-dd to any other date format or just insert months name

What is wrong?
app is not getting build in to my phone.

on running $react-native run-android on windows cmd

gradle repo is getting downloded and installed while installing application to device I'm getting this error

Exception in thread "main" java.lang.NullPointerException
at org.gradle.wrapper.BootstrapMainStarter.findLauncherJar(BootstrapMain
Starter.java:34)
at org.gradle.wrapper.BootstrapMainStarter.start(BootstrapMainStarter.ja
va:25)
at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:127)
at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)

Where does it happen?
it happens on graddle I guess i don't know clearly

How do we replicate the issue?
just use command react-native run-android

How important is this (1-5)?
I am not even able to create a sample hello world app because of this issue.

Expected behavior (i.e. solution)
App should open in my android device

Dependency react-window-resize-listener uses react features which is dropped from react@16 such React.PropTypes and React.createClass methods.

Failed to compile
./src/App.js
Module not found: Can't resolve 'react-gantt' in 'C:\projects\gantt-diagramm\src'
This error occurred during the build time and cannot be dismissed.

I'm using a switch from react-router to route between pages in my app. However when I try to route away from the page that contains the ReactGantt component I get this error:

Uncaught TypeError: Cannot read property 'removeEventListener' of undefined
at ReactGantt.componentWillUnmount (index.js:100)
at callComponentWillUnmountWithTimer (react-dom.development.js:14280)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at safelyCallComponentWillUnmount (react-dom.development.js:14287)
at commitUnmount (react-dom.development.js:14494)
at commitNestedUnmounts (react-dom.development.js:14525)
at unmountHostComponents (react-dom.development.js:14776)
at commitDeletion (react-dom.development.js:14827)

This happens right after the parent component unmounts. Any suggestions on how to fix this?

I'm using the readme example code.
React - 16.4.0,
react-dom - 16.2.0
react-router - 4.3.1
react-gantt - 2.1.4

how can I display hour and minutes along with date in popUp and steps both