formBuilder is not a function

Question

Description:

• I have used the Form Builder library for react based on your documentation. I have previously built a feature for one of my projects where I wanted custom fields and not the predefined ones. However I was able to achieve it as it was react based on simple JavaScript(.js extension).
• Now I have to achieve the same functionality in my another project which is based on Vite + TS and I am unable to get the result and the error that is thrown is formBuilder is not a function. The same code which I have used in .js file(my other project) does not work here and behaves weirdly.
• I have also tried to configure my latest project such that it can support js/jsx configurations but at the end I end up with the same error.

Here is the code:

 useEffect(() => {
if (fb.current) {
  setTimeout(() => {
    setFormBuilder(
      $('#form-builder-area').formBuilder({
        ...options,
        fields,
      })
    );
  }, 5000);
}

}, [fields, options]);

• Uncaught TypeError: $(...).formBuilder is not a function

• This error pops up and also it crashes the application if I do not use .ready method of jQuery or do not put it in setTimeout.

Steps to Reproduce

• Setup a project with MUI theme with the latest versions of React JS and Vite.
• Use the library and try to make the fields dynamic.

Here are the resources you might need to look into this issue:

• Form Builder - https://formbuilder.online/
• Form Builder Repo - https://github.com/kevinchappell/formBuilder
• Form Builder npm link - https://www.npmjs.com/package/formBuilder

I have mentioned the actual and the expected behaviour in the description itself.

Answer 1

Got a solution from the authors. Posting a link here!!! https://github.com/kevinchappell/formBuilder/issues/1509#issuecomment-1952435414