PROBLEM: After converting an existing Skuid v1 page to v2 by using the Skuid Migration Utility, the following error occurred: “There was a problem initializing a component of type skuid__page”
RESOLUTION: The error was caused by a custom JS snippet that would need to be modified for use in v2. Instead, we found a declarative way to replace the custom JS snippet completely.
Problem Details
Since Skuid’s Chicago release you can convert existing v1 pages to v2 by using the Skuid Migration Utility. After the migration process is complete, this warning was displayed in the App Composer:
And when you previewed the new page, the following error was displayed at the top: “There were 1 problems with this Skuid page. 1: There was a problem initializing a component of type skuid__page.” Since it was a very complex page, I ran some general tests at the beginning before checking the page details:
Resolution Process
First, I tried to convert
- the original v1 page again to v2 to find out quickly if the issue was reproducible. The same error occurred on the new v2 page, so the issue was reproducible.
- Next, I created a new empty v1 page and converted it to v2. That worked fine, and it could be previewed without any error, so I could exclude the possibility that there was a general issue with the Migration Utility in this specific org.
- I then checked the page details and deleted the custom JS snippets one by one from the v2 page that I had created in step #1. I always saved and previewed the page after I had deleted a custom JS snippet, until the page could be previewed without any error.
Outcome
By deleting the snippets one by one I could identify exactly which snippet caused the error. As stated in the warning, some JS snippets need to be rewritten after you’ve converted a v1 page to v2. However, in this case we found that you could actually replace the custom JS in question with declarative actions. The JS snippet was listening for model changes. If there was a change in one model, it should update a field on another model. We could delete the snippet, and use Model actions instead. The action’s Initiating event was “Row in model updated”, which triggered the action to Update rows on the other model.
Takeaways
While many JS snippets translate easily to v2, when migrating a v1 page to v2, you need to verify that all snippets continue to work as intended. Certain snippets may need to be rewritten. We recommend you always evaluate your use case to determine if a snippet is needed since out of the box v2 features like formula fields, action framework, display logic, and conditional styling allow you to accomplish even more with even less code than in v1. Declarative solutions are also more stable when it comes to upgrading Skuid.
- Blog: Why Skuid customers should migrate to V2: a Skuid builder’s perspective
- Blog: How to migrate to v2: a Skuid builder’s checklist, part 1
- Documentation: Migration Utility v1 -> v2
- Documentation: Model actions
Get help with an issue
Ask in the Skuid user community in the questions category
- If you have paid support ask your question on our support portal skuid.freshdesk.com
- If you’re interested in support, contact your Account Executive.
