-
Goal: We need to implement a custom component that consists of a button that, when clicked, generates a PDF template. For this we use the @pdfme/common and @pdfme/generator libraries.
-
Steps:
We simply install both libraries via npm in our custom component @pdfme/common and @pdfme/generator and when we click the button we call the generate function. This causes the custom component to not render and leaves a generic error that does not allow us to delve much deeper into the error. -
Details:
Debugging the error we find that the error occurs in the following line of code.
Returning the following error in console
We have tried to carry out the same example in a react application and we did not find any errors with this library and the code runs correctly.
the index.tsx is as follows
and the package.json:
I understand that it must be an error that occurred when importing the @pdfme library but I can't figure out the reason. Could you give us a solution or at least information so we can try to solve it?
And the app exported json file:
{
"uuid":"69841122-d3ec-11ef-968b-b3b357b20dd5",
"page":{
"id":46232,
"data":{
"appState":"[\"~#iR\",[\"^ \",\"n\",\"appTemplate\",\"v\",[\"^ \",\"appMaxWidth\",\"100%\",\"appStyles\",\"\",\"appTesting\",null,\"appThemeId\",null,\"appThemeModeId\",null,\"appThemeName\",null,\"createdAt\",null,\"customComponentCollections\",[[\"^ \",\"collectionName\",\"CustomComponnetsLibrary\",\"collectionRevisionUuid\",\"3742f08b-aba0-44d9-8091-c4deb8a35756\",\"collectionUuid\",\"6adca12c-d76b-4626-9fcd-882d2c75ef45\"]],\"customDocumentTitle\",\"\",\"customDocumentTitleEnabled\",false,\"customShortcuts\",[],\"experimentalDataTabEnabled\",true,\"experimentalFeatures\",[\"^ \",\"disableMultiplayerEditing\",false,\"multiplayerEditingEnabled\",false,\"sourceControlTemplateDehydration\",false],\"folders\",[\"~#iL\",[]],\"formAppSettings\",[\"^ \",\"customRedirectUrl\",\"\"],\"inAppRetoolPillAppearance\",\"NO_OVERRIDE\",\"instrumentationEnabled\",false,\"internationalizationSettings\",[\"^ \",\"internationalizationEnabled\",false,\"internationalizationFiles\",[]],\"isFetching\",false,\"isFormApp\",false,\"isGlobalWidget\",false,\"isMobileApp\",false,\"loadingIndicatorsDisabled\",false,\"markdownLinkBehavior\",\"auto\",\"mobileAppSettings\",[\"^ \",\"displaySetting\",[\"^ \",\"landscapeMode\",false,\"tabletMode\",false],\"mobileOfflineModeBannerMode\",\"default\",\"mobileOfflineModeDelaySync\",false,\"mobileOfflineModeEnabled\",false],\"mobileOfflineAssets\",[],\"multiScreenMobileApp\",false,\"notificationsSettings\",[\"^ \",\"globalQueryShowFailureToast\",true,\"globalQueryShowSuccessToast\",false,\"globalQueryToastDuration\",4.5,\"globalToastPosition\",\"bottomRight\"],\"pageCodeFolders\",[\"^ \"],\"pageLoadValueOverrides\",[\"^E\",[]],\"plugins\",[\"~#iOM\",[\"$main\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"$main\",\"uuid\",null,\"type\",\"frame\",\"subtype\",\"Frame\",\"namespace\",null,\"resourceName\",null,\"resourceDisplayName\",null,\"template\",[\"^18\",[\"type\",\"main\",\"sticky\",null,\"padding\",\"8px 12px\",\"enableFullBleed\",false,\"isHiddenOnDesktop\",false,\"isHiddenOnMobile\",false]],\"style\",[\"^18\",[]],\"position2\",null,\"mobilePosition2\",null,\"mobileAppPosition\",null,\"tabIndex\",null,\"container\",\"\",\"^7\",\"~m1737114900911\",\"updatedAt\",\"~m1737114900911\",\"folder\",\"\",\"screen\",null]]],\"helloWorld1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"helloWorld1\",\"^19\",\"b40697b7-2b56-4298-aa9c-b476a12e9130\",\"^1:\",\"widget\",\"^1;\",\"DynamicWidget_CustomComponnetsLibrary_HelloWorld\",\"^1<\",null,\"^1=\",null,\"^1>\",null,\"^1?\",[\"^18\",[\"heightType\",\"fixed\",\"name\",null,\"collectionUuid\",\"6adca12c-d76b-4626-9fcd-882d2c75ef45\"]],\"^1@\",[\"^18\",[]],\"^1A\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^1:\",\"grid\",\"^1E\",\"\",\"rowGroup\",\"body\",\"subcontainer\",\"\",\"row\",6.4,\"col\",3,\"height\",4,\"width\",5,\"tabNum\",0,\"stackPosition\",null]]],\"^1B\",null,\"^1C\",null,\"^1D\",null,\"^1E\",\"\",\"^7\",\"~m1737114930850\",\"^1F\",\"~m1737114930850\",\"^1G\",\"\",\"^1H\",null]]]]],\"preloadedAppJavaScript\",null,\"preloadedAppJSLinks\",[],\"queryStatusVisibility\",false,\"responsiveLayoutDisabled\",false,\"rootScreen\",null,\"savePlatform\",\"web\",\"shortlink\",null,\"testEntities\",[],\"tests\",[],\"urlFragmentDefinitions\",[\"^E\",[]],\"version\",\"3.131.0\"]]]"
},
"changesRecord":[
{
"type":"WIDGET_REPOSITION2",
"payload":{
"moves":[
{
"move":{
"col":0,
"row":0,
"width":3,
"height":15
},
"screen":{
"descendentIds":[]
},
"moveType":"resize",
"widgetIds":["helloWorld1"]
}
],
"largeScreen":true
},
"hideChangelogEntry":false
}
],
"changesRecordV2":[
{
"data":{
"op":"update",
"ids":["helloWorld1"],
"tag":"plugin"
},
"type":"diff",
"version":1
}
],
"gitSha":null,
"checksum":null,
"createdAt":"2025-01-17T11:55:46.686Z",
"updatedAt":"2025-01-17T11:55:46.686Z",
"pageId":372,
"userId":410
},
"modules":{}
}