Error implementing a custom componnet with the @pdfme library

  • 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":{}
}

Hey @antiarc! Welcome to the community. :slightly_smiling_face:

This is a really interesting find - I've done quite a bit of work with custom components but haven't seen this particular issue before. It definitely looks like an issue with parsing the data URL, as you pointed out, but I can't figure out why the @pdfme/generator library is causing this to fail.

I'm going to loop in some other team members to see if they might have an idea.

We've spent a bit of time digging into this without a clear resolution, unfortunately. The working theory is that the JS of this particular library (or one of its dependencies) is being compiled in binary and then incorrectly bundled or imported.

It's unlikely that we'll be able to ship a fix anytime soon, but I'll keep this topic updated when there is future movement. In the meantime, is there a similar library that will address your specific use case?