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 = () => {
/* 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 (
<>

Form

{createFormBuilderHeaderData?.name}

Module

{createFormBuilderHeaderData?.module_name}

Department

{createFormBuilderHeaderData?.department_id?.label}

</>
)
}

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 :
formio/formio.js#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.

[lane-formio]

Is this still reproducible in our latest versions?

[soapwong703]

Yes I can still reproduce with these versions

    "@formio/js": "5.0.0-rc.76",
    "@formio/react": "^6.0.0-rc.1",

[lane-formio]

Can we get a codesandbox to help reproduce and triage?