Unable to add Flatfile to an existing Vite project using FlatfileProvider, however intiailizeFlatfile works

[titus58]

I'm trying to implement Flatfile on an existing project created with Vite. I'm having problems getting the iframe to start when using FlatfileProvider.

Initially I thought there's a problem with the HTML file or I'm missing some CSS. However, I also tried using the initializeFlatfile hook and everything worked well. I don't mind using initializeFlatfile but it shows up on my IDE as deprecated.

I extracted only the essential code on a small repo. In App.jsx I have two components. One uses initializeFlatfile and the other one FlatfileProvider.

https://github.com/titus58/flatfile-react/blob/master/src/App.jsx#L37

Can someone tell me what I'm doing wrong with the FlatfileProvider ?

Thanks

[Arsik36]

Hey, thank you for reaching out to us. I am glad initializeFlatfile works well for you as you tried it. We are in the very final stages of updating the docs with code examples and repos around FlatfileProvider, I will make sure to update you as soon as they are out. You are safe to use initializeFlatfile for now. We are not going to add functionality to it, but it is supported, and we should have new docs come out very soon

[titus58]

Got it. Thank you so much for the quick reply

[premiare]

I would love an @ from you @Arsik36 when the examples and docs are finalized!

[Arsik36]

Will do :)

[Arsik36]

Hi, thank you for your patience as we were updating the docs. Happy to let you know that we now updated docs for React and have an example repo.
Updated docs - https://flatfile.com/docs/apps/embedding/react/components
Example repo - https://github.com/FlatFilers/create-flatfile-react

Another useful link to keep handy is our public changelog where we document new features as they come out - https://flatfile.com/docs/changelog/platform

[titus58]

Thanks for the update @Arsik36 . I can confirm it is working now.

I compared my old version to the new one that is working and it seems that the issue was having the useFlatfile hook in the same component as the FlatfileProvider. Once I moved the SheetConfig code to a separate component it looks like it is working well. This commit illustrates it best: titus58/flatfile-react@294e352

Btw, there are some syntax errors in the updated documentation. In FlatfileProvider -> config there are some commas missing after some lines (exitTest, exitPrimaryButtonText). Also it would be helpful if the value in configs are set in the docs, instead of referencing some variables (mountElement etc) that are outside the docs page.

[Arsik36]

Thank you for letting me know, just PR-ed to correct the syntax issues :)