Search code examples
javascriptreactjstypescriptformsformbuilder

formBuilder is not a function

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:

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

Solution

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