[VUE] Uncaught (in promise) TypeError: _0x3b6336[_0x1cfa(...)] is not a function

[Meloncon]

Hi, there!

I am working on integrating Gantt (Currently in trial mode) into a Ruby on Rails app using Webpacker and Vue. I was able to get the Gant component to display just fine, but I am receiving the following error when it attempts to load data. It seems to be some obfuscation or something and I can't seem to make heads or tales of it. Perhaps I didn't integrate it properly? Any thoughts or suggestions?

[alex.l]

Hi Meloncon,

I'm sad to hear you have problems with integration. It's not possible to us to understand the reason without a runnable test case or steps to reproduce using our examples.
Please, make your app as small as possible to reproduce the issue and attach it here, so we will have a look and try to help with this problem.
Our forum policy is here: viewtopic.php?f=35&t=772

All the best,
Alex

[Meloncon]

Hi Alex,

Thank you for your response!

Component Version: Bryntum Gantt 4.0.8

Browser Version: Firefox 86.0, Ubuntu 20.04 (Pop!_OS)

Step by Step:

1. Added Vue 2.6.12 via WebPacker in our existing Ruby on Rails app
2. Installed Bryntum with NPM using the provided build folder from the Bryntum zip file.
3. Created the Vue component files and folders by following the Vue Integration guide. (This is the first and only Vue component in the RoR app)
4. Added the webpacker erb tag to pull in the Gantt Vue Components.
5. It displays the Gantt Chart with all the buttons and stuff, but no data:
   
6. The above error is displays in the Developer Console in Chrome and Firefox

Debugging:

1. Tried included a view extra wrappers that the Brytum Vue Integration guide mentioned for custom Vue projects. Same result though.
2. Not sure where to start looking now. So I turned to the forums for help.

Error Message:

Test Case:

• I've attached it to this post.
• It has two folders in it:
  1) One called "build" that is the folder that contains the Brytum Gantt source from the zip file. This is the folder used to run the npm install command.
  2) One called "vue" that contains the simplest Vue components that wrap and pull in the Gantt chart.

I hope these are sufficient to see what is going on. Let me know if you need anything else! Thanks!

[alex.l]

Hi Meloncon,

I am not able to follow your steps to reproduce, like "Added Vue 2.6.12 via WebPacker in our existing Ruby on Rails app".
But I was able to create an app using your source files and run it. Next time please just zip your working app without changes in folder structure and include all config files, except our source code, so it will be much easier and faster to run it and debug.
I see that you imported JSON file and set it as a value for load url in the projectModel config.
Please check our docs: https://bryntum.com/docs/gantt/#Gantt/model/ProjectModel#built-in-crudmanger
You should use an URL and not JSON object as a value here. So I changed it to a path to JSON file and it works great.

project: new ProjectModel({
    taskModelClass: Task,
    transport: {
        load: {
            // url : sample_dataset_url 
            url: 'datasets/launch-saas.json' // please use your path or make sure you have that file in that dir.
        }
    }
}),

Please check it and let us know if it works. Thanks in advance!

All the best,
Alex

[Meloncon]

Hi Alex,

Thank you! That solved the issue that I was experiencing. I don't think I was specifying how to load the data properly. After that I get no errors in the web console and things seems to load just fine in the DOM. However, I see the Gantt toolbar and everything but the actual chart of data is not appearing. I can verify that it is there in the DOM when I inspect the elements. Do you know why that may be? I'm including a screenshot to show you what I am talking about.

It looks like it is displaying behind the rest of the content or something, perhaps CSS?

[mats]

Looks like you have not sized the component. Have you applied CSS styles to give the component proper height?

[Meloncon]

Thank you Mats! That was the problem. Once I size the component, it started displaying as expected.

I have one more quick question: are there any limitations in the Free Trial version? Specifically with data set size? Some of our larger projects show the loading spinner for the data and then it never goes away. I wanted to make sure that this wasn't a limitation of the trial before I proceed with looking into it more. I am getting an error in the web console, so perhaps it's unrelated to being in free trial mode. Here's a screenshot of the error if it helps:

[mats]

No limitations, sounds like you have record duplication in your data as the message says. Check the JSON you load and see?