[BUG] Custom component unmounting

[FractalStranger]

Hi,

I have a React18 project and wanted to make custom react-formio component (code below) but this.container.unmount in detachReact method shows this warning:

Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.

is there any way to unmount the element without the warning? (And is react-formio compatible with React 18 overall?)

Thanks.

Code:

export default class Grid extends ReactComponent {
  ...
  ...

  attachReact(element) {
    this.container = createRoot(element)
    return this.container.render(
      <HistoryRouter history={history}>
        <GridComponent {...{ ...this }} />
      </HistoryRouter>
    )
  }

  detachReact(element) {
    if (element) {
      this.container.unmount() // this creates the race condition warning
    }
  }
}

Environment

• Hosting type
  • [ ] Form.io
  • [x] Local deployment
    • Version:
• Formio.js version: 5.0.0-m.3
• Frontend framework: React 18

[aryanisml]

Do u have any example of custom component with react typescript if yes please share.

[FractalStranger]

Typescript? Does react-formio support Typescript? It doesn't seem so.

Here is the code of custom component: https://jsfiddle.net/kv0tq9p8/

[govind15496]

Hey I am a newcomer in this project and I would like to contribute

[mtruon11]

Hi,

I have a React18 project and wanted to make custom react-formio component (code below) but this.container.unmount in detachReact method shows this warning:

Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.

is there any way to unmount the element without the warning? (And is react-formio compatible with React 18 overall?)

Thanks.

Code:

export default class Grid extends ReactComponent {
  ...
  ...

  attachReact(element) {
    this.container = createRoot(element)
    return this.container.render(
      <HistoryRouter history={history}>
        <GridComponent {...{ ...this }} />
      </HistoryRouter>
    )
  }

  detachReact(element) {
    if (element) {
      this.container.unmount() // this creates the race condition warning
    }
  }
}

Environment

• Hosting type

  • [ ] Form.io

  • [x] Local deployment

    • Version:

• Formio.js version: 5.0.0-m.3

• Frontend framework: React 18

I wonder if you can share your GridComponent code? I am trying to implement it myself but I am not sure how to start.

[lotorvik]

@FractalStranger did you figure any way to get around this?

[YoungDriverOfTech]

@FractalStranger Hello, did you find someway to figure this out yet? Same issue I also encoutered.