formio.js Error when running `Formio.builder(...)` after some delay/events

This is part of my HTML

<head>
    ...
    <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
    <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
</head>
<body>
    ...
    <script>
        Formio.builder(document.getElementById('builder'), {}, {})
            .then(function(builder) {
                builder.on('saveComponent', function() {
                    console.log(builder.schema);
                });
            });

        function render() {

        }
    </script>
</body>

Using the above code, form builder shows up correctly.
As I need the Formio code to run only after some events, I moved them into render()
But running render() gets the Missing projectId warning + error, and the builder doesn't render to a workable state
Any idea how I can troubleshoot?

Thank you.

Originally posted by @bilogic in https://github.com/formio/formio.js/issues/4048#issuecomment-1238843625

Sep 07 '22 04:09 bilogic

I narrowed it down to utils.js::bootstrapVersion()

When Formio.builder is called outside render(), it goes to line 47 and returns 0;
When called from inside render(), it goes to line 44

Any idea what this set of logic is for? Especially the use of $. Sorry I'm not proficient with javascript, but isn't $ like a global variable or something?

Thank you.

Sep 07 '22 04:09 bilogic

I seem to be missing a critical part of your setup, because in your code extract the render() method is empty, and it's not clear when and how you call it. Also, the formio initialization code outside of render() confuses me.

As I need the Formio code to run only after some events, I moved them into render()

What do you mean by that?

Sep 07 '22 08:09 0liver

Hi,

render() is empty, that is the exact code I'm using. I'm using hotwire to bring the html and javascript through AJAX (If that makes sense?) let me see if there is a way to reproduce this in a fiddle.

But my findings in bootstrapVersion still stands. Thank you.

Sep 07 '22 09:09 bilogic

What is render() for then, if it's empty?

By the way, $ is the global variable jQuery uses, which is used by bootstrap, so in order for bootstrapVersion() to work correctly, you'll need to have jQuery loaded on the page.

Sep 07 '22 09:09 0liver

Render was created to store the formio code, it is necessary because i needed to call it later instead according to its order in placed in the HTML

Sep 07 '22 09:09 bilogic

Please create a Fiddle showing the problem, otherwise I won't be able to help much.

Sep 07 '22 09:09 0liver

@0liver

https://jsfiddle.net/gsfiddle/h5rbo4dv/10/

Great news, I managed to reproduce in a jsfiddle.

The jsfiddle shows the issue: try clicking on Show builder button, the builder will render but you can't drag drop any components
Disable/remove the app.js found at the end of body, this time, builder will render and drag/drop will work
I have to admit, app.js consists of code not written by me, but I would not expect formio to be crippled because of an additional script
I identified the cause to be at around render(), specifically, the value of $ at the various lines which comments have been added
$ has be null prior to calling Formio.builder(...) in order for things to work
I guess after all these troubleshooting, is it viable to rename $ as jQuery to be more compatible with other javascript packages?

Thank you.

Sep 07 '22 18:09 bilogic

I've added console.log($) to your render function to see what $ refers to. I then inspected this (which is the same as window) in the jsfiddle console, and found - by chance - that the dom property is exactly the same as $. So it looks like that app.js script bundle sets that.

Ultimately it will be your task to dig deeper and fix what's broken.

I would not expect formio to be crippled because of an additional script

Well, all scripts work in the same global environment and can impact each other. That's why it's important to write encapsulated code, but not all code is.

Good luck!

Sep 08 '22 09:09 0liver

5. $ has be null prior to calling Formio.builder(...) in order for things to work

Thanks, yes, I'm aware that app.js sets the value of $ and removing app.js solves the problem.

But just for my understanding, is using $ considered as writing encapsulated code?

Sep 08 '22 12:09 bilogic

No :-D

But jQuery is one of those exceptions I guess that are widely accepted.

Sep 08 '22 12:09 0liver

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!

Feb 07 '24 14:02 daneformio

The way I see it, after waiting for over 2 years, there is still 300 more to go

Feb 07 '24 23:02 bilogic

Please re-open and provide an example of this issue in the latest versions and we'd be happy to review soon.

Feb 12 '24 15:02 daneformio

formio.js formio.js copied to clipboard

Error when running `Formio.builder(...)` after some delay/events

formio.js
formio.js copied to clipboard