Skip to content

[BUG] @formio/react 6.0.2 + @formio/js 5.2.0 runtime TypeErrors (hasExtraPages / triggerChange missing) #6251

@tburk98

Description

@tburk98

Describe the bug
I'm trying to upgrade two frontend formio packages from @formio/react 5.3.0 + formiojs 4.17.1 to @formio/react 6.0.2 with @formio/js 5.2.0 (per compatibility matrix: React 18 + 6.0.x + 5.x core) and I'm running into runtime crashes when rendering multi-page wizard forms with nested form components:

Uncaught TypeError: Cannot read properties of undefined (reading 'hasExtraPages')
    at Webform.validationProcessor (NestedComponent.js:675:1)
    at Object.validationProcessorProcess (NestedComponent.js:699:1)
    at processOneSync (processOne.js:78:1)
    at eval (process.js:59:1)
    at eval (eachComponentData.js:23:1)
    at eval (eachComponent.js:32:1)
    at Array.forEach (<anonymous>)
    at eachComponent (eachComponent.js:23:1)
    at eachComponentData (eachComponentData.js:21:1)
    at processSync (process.js:58:1)
    at Webform.validateComponents (NestedComponent.js:729:1)
    at Webform.validate (NestedComponent.js:739:1)
    at Webform.onChange (Webform.js:1258:1)
    at eval (Component.js:353:1)
    at invokeFunc (lodash.js:10401:1)
    at trailingEdge (lodash.js:10450:1)
    at timerExpired (lodash.js:10438:1)

Version/Branch
@formio/react: 6.0.2
@formio/js: 5.2.0
React: 18.3.x
Next.js: 14 (app uses classic pages)

Dynamic form import example:

const DynamicForm: React.ComponentType<FormProps> = dynamic(
  () =>
    (import('@formio/react') as any).then((mod: any) => {
      return mod.Form;
    }),
  {
    ssr: false,
  }
);

Dynamic provider In _app.tsx:

<DynamicProvider baseUrl={FORMIO_URL} projectUrl={FORMIO_URL}> 
  ... 
</DynamicProvider>

To Reproduce
Steps to reproduce the behavior:

  1. Create Next.js 14 project with React 18
  2. Install @formio/react@6.0.2 and @formio/js@5.2.0
  3. Dynamically import Form and FormioProvider components (ssr: false).
  4. Render a Wizard form with nested form components (seems to work fine without nested form components). To create the form I'm currently using formio enterprise: Application: 8.1.0, Renderer: 4.15.0 but I'm experiencing the same issue with the new version: Application: 9.6.0, Renderer: 5.2.1

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Image

Additional context
Add any other context about the problem here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions