formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.87k stars 1.06k forks source link

Error when Forking and Removing Options from Edit Component in @formio/react and formiojs #5239

Open samirpokharel opened 1 year ago

samirpokharel commented 1 year ago

I am attempting to fork and modify the Edit component from the @formio/react and formiojs packages. My goal is to remove certain options from the component. However, when I try to install the package directly from the GitHub repository, I encounter the following error:

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1630:1)
    at FormBuilder (FormBuilder.js:22:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at mountIndeterminateComponent (react-dom.development.js:17482:1)
    at beginWork (react-dom.development.js:18596:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at beginWork$1 (react-dom.development.js:23203:1)
    at performUnitOfWork (react-dom.development.js:22157:1)
    at workLoopSync (react-dom.development.js:22130:1)
    at performSyncWorkOnRoot (react-dom.development.js:21756:1)
    at react-dom.development.js:11089:1
    at unstable_runWithPriority (scheduler.development.js:653:1)
    at runWithPriority$1 (react-dom.development.js:11039:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084:1)
    at flushSyncCallbackQueue (react-dom.development.js:11072:1)
    at discreteUpdates$1 (react-dom.development.js:21893:1)
    at discreteUpdates (react-dom.development.js:806:1)

This error seems to be related to the useRef hook in the react package. The error message provides a stack trace, which suggests that the error originates in the FormBuilder component.

Additionally, the error message points to the following component hierarchy where the error occurs:

index.js:1 The above error occurred in the <FormBuilder> component:
    in FormBuilder (at Build.js:388)
    in div (at Build.js:387)
    in Build (at AddForms.js:94)
    in div (created by Col)
    in Col (at CustomBootstrap.js:4)
    in Colxx (at AddForms.js:93)
    in div (created by Row)
    in Row (at AddForms.js:92)
    in Route (at AddForms.js:91)
    in Switch (at AddForms.js:84)
    in div (created by Col)
    in Col (at CustomBootstrap.js:4)
    in Colxx (at AddForms.js:62)
    in div (created by Row)
    in Row (at AddForms.js:61)
    in AddForms (created by Context.Consumer)
    in withRouter(AddForms) (at forms-v2/index.js:12)
    in UpdateForms (created by Context.Consumer)
    in Route (at forms-v2/index.js:28)
    in Switch (at forms-v2/index.js:20)
    in div (at forms-v2/index.js:19)
    in Dashboards (created by Context.Consumer)
    in Route (at spaces/index.js:74)
    in Switch (at spaces/index.js:47)
    in Suspense (at spaces/index.js:46)
    in div (at AppLayout.js:18)
    in main (at AppLayout.js:17)
    in div (at AppLayout.js:13)
    in AppLayout (created by Connect(AppLayout))
    in Connect(AppLayout) (created by Context.Consumer)
    in withRouter(Connect(AppLayout)) (at spaces/index.js:45)
    in App (created by Context.Consumer)
    in withRouter(App) (at App.js:70)
    in Route (at App.js:66)
    in AuthRoute (at App.js:97)
    in Switch (at App.js:96)
    in Suspense (at App.js:95)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:94)
    in IntlProvider (at App.js:89)
    in div (at App.js:88)
    in App (created by Connect(App))
    in Connect(App) (at AppRenderer.js:54)
    in KeycloakProvider (at AppRenderer.js:35)
    in Provider (at AppRenderer.js:34)
    in ReactQueryConfigProvider (at AppRenderer.js:33)

I would appreciate any insights or suggestions on how to resolve this error and successfully fork the Edit component with the desired modifications. Thank you!

lane-formio commented 2 months ago

Which branches are you forking from?