Skip to content
This repository has been archived by the owner on Jan 5, 2022. It is now read-only.

Adding gantt-elastic as vue component error #32

Closed
Mak-NOAA opened this issue Mar 12, 2019 · 20 comments
Closed

Adding gantt-elastic as vue component error #32

Mak-NOAA opened this issue Mar 12, 2019 · 20 comments

Comments

@Mak-NOAA
Copy link

Mak-NOAA commented Mar 12, 2019 •
edited

Hi all,

Not sure if I should post this on stackoverflow vs here but thought I try it here first. I'm new to gantt-elastic and vue in general but wanted to add gantt-elastic as a vue component. I ran into an issue registering the component.

I installed gantt-elastic using yarn add gantt-elastic.

Then I registered the vue component in my main.ts:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';

import 'quasar/dist/quasar.min.css'; // WS- Added this after commenting out .styl imports
import './styles/quasar.styl';
import '@quasar/extras/roboto-font/roboto-font.css';
import '@quasar/extras/material-icons/material-icons.css';
import GanttElastic from "gantt-elastic/src/GanttElastic.vue";

import {
  Quasar,
  QLayout,
  QHeader,
  QDrawer,
  QPageContainer,
  QPage,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QItem,
  QItemSection,
  QItemLabel
} from 'quasar';

Vue.use(Quasar, {
  config: {},
  components: {
    QLayout,
    QHeader,
    QDrawer,
    QPageContainer,
    QPage,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QItem,
    QItemSection,
    QItemLabel,
    GanttElastic
  },
  directives: {},
  plugins: {}
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app');

then I tried to add the example in a vue file called Chart.vue:

<template>
  <q-page padding>
    <gantt-elastic :tasks="tasks" :options="options">
    <!-- <gantt-elastic-header slot="header"></gantt-elastic-header>
    <gantt-elastic-footer slot="footer"></gantt-elastic-footer> -->
  </gantt-elastic>
  </q-page>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class PageAbout extends Vue {
  private tasks:any;
  private options:any;

}
</script>

I receive a Vue-warn of:

vue.runtime.esm.js?8846:619 [Vue warn]: Unknown custom element: <gantt-elastic> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <PageAbout> at src/views/Chart.vue
       <QPageContainer>
         <QLayout>
           <LayoutDefault> at src/layouts/Default.vue
             <App> at src/App.vue
               <Root>

How do I register it correctly?
@neuronetio
Copy link
Owner

neuronetio commented Mar 12, 2019 •
edited

I'll check it tomorrow, and in the meantime leave the vue version here

I think that it may be because elastic-gantt doesn't have a name property.
For quick fix you can try someting like this

// Chart.vue
<template>
  <q-page padding>
    <gantt-elastic :tasks="tasks" :options="options">
    <!-- <gantt-elastic-header slot="header"></gantt-elastic-header>
    <gantt-elastic-footer slot="footer"></gantt-elastic-footer> -->
  </gantt-elastic>
  </q-page>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import GanttElastic from 'gantt-elastic';

@Component
export default class PageAbout extends Vue {
  components = { GanttElastic };
  private tasks:any;
  private options:any;
}
</script>

I don't know ts so maybe you must fix this code

@Mak-NOAA
Copy link
Author

Thanks @neuronetio , I seem to be getting the same error message with your quick fix code.

@neuronetio
Copy link
Owner

what about now? (v0.10.1)

@eaf-andrewbaccus
Copy link

eaf-andrewbaccus commented Mar 13, 2019 •
edited 

import GanttElastic from 'gantt-elastic';

@Component({
  components: {
    'gantt-elastic': GanttElastic
  }
})
export default class BaseIterator extends Vue {

this seems to work for me on 0.10.0. is 0.10.1 published to NPM yet?

@neuronetio
Copy link
Owner

I forgot to publish :) 👍
But your solution is ok too.
Let me know here if 0.10.1 also works, thanks!
I'm closing this issue.

@eaf-andrewbaccus
Copy link

It still loads using this method on 0.10.1 for me. However, I am seeing the following error. Is it related?

[Vue warn]: Error in created hook: "ReferenceError: Vue is not defined"

found in

---> <GanttElastic> at node_modules/gantt-elastic/src/GanttElastic.vue

@neuronetio
Copy link
Owner

not related but important! :)

@Mak-NOAA
Copy link
Author

We are still getting the same register error. I did a
yarn add gantt-elastic@latest

and I rebuilt everything....so I'm pretty sure I'm on 0.10.1

Screen Shot 2019-03-14 at 4 18 48 PM

Any thoughts?

@neuronetio
Copy link
Owner

@eaf-andrewbaccus try 0.10.14
@Mak-NOAA update to 0.10.14
if problem still exists try @eaf-andrewbaccus solution

import GanttElastic from 'gantt-elastic';

@Component({
  components: {
    'gantt-elastic': GanttElastic
  }
})
export default ...

@neuronetio
Copy link
Owner

@Mak-NOAA I will check this anyway on typescript, but I don't know when - maybe in next week

@neuronetio
Copy link
Owner

@Mak-NOAA And first of all, try to import GanttElastic in your component directly - do not add gantt-elastic to quasar components, because it is not a quasar module :)

@ghost
Copy link

ghost commented Mar 14, 2019

After resolving the component registration, we are seeing the same issue eaf-andrewbaccus reported:

[Vue warn]: Error in created hook: "ReferenceError: Vue is not defined"
found in
---> <GanttElastic> at node_modules/gantt-elastic/src/GanttElastic.vue

This was in a non-typescript project just created with vue create from the CLI. Haven't quite figured out how to get it running using the example code provided in Examples. Thanks for a cool looking component--hoping we can figure it out!

@Mak-NOAA Mak-NOAA mentioned this issue Mar 15, 2019
Open
@Mak-NOAA
Copy link
Author

@neuronetio we got along a little further and now seeing this layout issue below:

Screen Shot 2019-03-15 at 12 57 24 PM

I can try to change the style height for class gantt-elastic__main-container-wrapper but I don't think that's the right approach.

We're also getting the following error....any thoughts on that would be great as well:

ERROR in /Users/seyed.ahmad/boatnet/apps/obs-web/src/views/Chart.vue
73:39 Parameter 'task' implicitly has an 'any' type.
    71 |       { id: 2, label: 'Description', value: 'label', width: 200, expander: true },
    72 |       { id: 3, label: 'Assigned to', value: 'user', width: 130, html: true },
  > 73 |       { id: 3, label: 'Start', value: task => dayjs(task.start).format('YYYY-MM-DD'), width: 78 },
       |                                       ^
    74 |       { id: 4, label: 'Type', value: 'type', width: 68 },
    75 |       {
    76 |         id: 5,

@neuronetio
Copy link
Owner

neuronetio commented Mar 15, 2019 via email

@neuronetio neuronetio reopened this Mar 16, 2019
@neuronetio
Copy link
Owner

check 0.10.15

@Mak-NOAA
Copy link
Author

Mak-NOAA commented Mar 17, 2019 •
edited

@neuronetio is 0.10.15 supposed to fix the issue with
73:39 Parameter 'task' implicitly has an 'any' type.
?

I still see the error

@neuronetio
Copy link
Owner

@Mak-NOAA I think that this is a typescript related message, and this is why I'm not using typescript :P you must fix it by yourself I will not help here, sorry.

@neuronetio
Copy link
Owner

@Mak-NOAA https://stackoverflow.com/questions/43064221/typescript-ts7006-parameter-xxx-implicitly-has-an-any-type

@neuronetio
Copy link
Owner

@eaf-andrewbaccus @wsmith-nwfsc Do you still have this error Error in created hook: "ReferenceError: Vue is not defined" in 0.10.15?

@ghost
Copy link

ghost commented Mar 18, 2019

@neuronetio We have it up and running now, thanks! We're just starting a new project, and tracked getting gantt-elastic up and running here:
nwfsc-fram/boatnet#192

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Mak-NOAA @neuronetio @eaf-andrewbaccus