importScript Error while Drag and Drap New Text field

[DivyarajsinhRana]

Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.form.io/ace/1.4.12/worker-json.js' failed to load.

Component

import React, { FC, useEffect, useState } from 'react' import styles from './createNewFormBuilder.module.scss' import { useLocation, useNavigate } from 'react-router-dom' import { useAppDispatch, useAppSelector } from '../../../hooks' import { requestGenerator } from '../../../utils/payloadGenerator' import CreatedUsersPopup from '../../../components/common/created-users-popup/CreatedUsersPopup' import { utcToDate } from '../../../utils/utils' import Button from '../../../components/common/button/Button' import { DropDownIcon, PolygonIcon, } from '../../../components/common/svg-components' import { FormBuilder, Form } from 'react-formio/lib/components' import { createNewForm, updateCreateNewFormById, } from '../../../redux/features/create-new-form/createNewFormAsynActions'

interface ICreateNewFormBuilder {}

const CreateNewFormBuilder: FC<ICreateNewFormBuilder> = () => { /* Dependency to navigate between pages / const navigate = useNavigate() / Dependency to navigate between pages */

/* Dependency to dispatch an action / const dispatch = useAppDispatch() / Dependency to dispatch an action */

/* Dependency for form builder / var selFormBuilderObj = {} // using a state variable and setting in handleFormBuilderChange was causing infinite loop issues so i have used var const [formBuilderJson, setFormBuilderJson] = useState({ display: 'form', components: [], }) / Dependency for form builder */

/* Selector to get the initial data of module from redux store*/ const { isLoading, createNewFormData, createFormBuilderHeaderData, isStatusUpdated, } = useAppSelector((state) => state.createNewForm) /* Selector to get the initial data of module from redux store*/

useEffect(() => { /* Navigate back to list component if the following dependencies are not present / if ( !createFormBuilderHeaderData.name || !createFormBuilderHeaderData.module_name || !createFormBuilderHeaderData.department_id ) { navigate('/formBuilder') } / Navigate back to list component if the following dependencies are not present */

if (
  createFormBuilderHeaderData.form &&
  createFormBuilderHeaderData.form !== '' &&
  createFormBuilderHeaderData.form !== null &&
  createFormBuilderHeaderData.form !== undefined
) {
  setFormBuilderJson(JSON.parse(createFormBuilderHeaderData.form))
}

}, [])

/* Function definition for form submission */ const onSubmit = () => { if ( createFormBuilderHeaderData._id && createFormBuilderHeaderData._id !== '' && createFormBuilderHeaderData._id !== undefined && createFormBuilderHeaderData._id !== null ) { const dataToBeSent = { id: createFormBuilderHeaderData._id, data: { name: createFormBuilderHeaderData.name, module_name: createFormBuilderHeaderData.module_name, department_id: createFormBuilderHeaderData.department_id.value, note: createFormBuilderHeaderData.note, form: JSON.stringify({ ...selFormBuilderObj }), }, }

  // console.log(dataToBeSent, 'datatobesent during update form builder call')
  dispatch(updateCreateNewFormById(requestGenerator(dataToBeSent))).then(
    (result) => {
      navigate('/formBuilder')
    }
  )
} else {
  const dataToBeSent = {
    name: createFormBuilderHeaderData.name,
    module_name: createFormBuilderHeaderData.module_name,
    department_id: createFormBuilderHeaderData.department_id.value,
    note: createFormBuilderHeaderData.note,
    form: JSON.stringify({ ...selFormBuilderObj }),
  }
  dispatch(createNewForm(requestGenerator(dataToBeSent))).then((result) => {
    console.log(result, 'result')
    navigate('/formBuilder')
  })
}

} /* Function definition for form submission */

/* Function definition for form builder - OnChange / const handleFormBuilderChange = (schema: any) => { console.log('schema', schema) selFormBuilderObj = schema } / Function definition for form builder - OnChange */

return ( <> <div className={styles.mainFormBuilderContainer}> <div className={styles.headerContainer}> <div className={styles.headerTitle}> <div className={styles.label_data}>

Form

<PolygonIcon />

{createFormBuilderHeaderData?.name}

<div className={styles.label_data}>

Module

<PolygonIcon />

{createFormBuilderHeaderData?.module_name}

<div className={styles.label_data}>

Department

<PolygonIcon />

{createFormBuilderHeaderData?.department_id?.label}

<div className={styles.buttonContainer}> <Button title="Submit Form" handleClick={onSubmit} /> <FormBuilder form={formBuilderJson} onChange={handleFormBuilderChange} /> </> ) }

export default CreateNewFormBuilder

[Shail-Shah-Arche]

Thanks for sharing this issue. I am facing the same.

[suman313]

Is anyone working in this issue? If not please assign me this job. I can work on solving this issue.

[brendanbond]

Is anyone working in this issue?

If not please assign me this job.

I can work on solving this issue.

PRs welcome!

[DivyarajsinhRana]

Yes sure @suman313 If you can resolve the issue. Thanks.

[suman313]

Hi @DivyarajsinhRana , Are you facing this issue while using their own platform? Seems like this component is present in the codebase in which formio has built its platform. In that case, as a contributor I can only make you aware of the issue but not solve it. Thanks in advance.

[DivyarajsinhRana]

Hi @suman313 , I Have installed library using npm and created component for form builder as above provided code , while i am drag and drop form elements randomly above error occurs. "react-formio": "^4.3.0" this is the version which i have installed.

[PadgetPII]

@brendanbond @suman313 I am facing the same issue as @DivyarajsinhRana and I was wondering if this issue could be related to this one : https://github.com/formio/formio.js/issues/5272

It does not happen all the time. I can put 5 text fields on the form, and the 6th is causing that issue. Which to me feels like the CDN is not responding correctly all the time.