TypeError: import_upng.default.decode is not a function

[AnruStander]

Describe the bug

We are encountering the following issue when using the generate function.

TypeError: import_upng.default.decode is not a function at PNG (/node_modules/@pdfme/pdf-lib/src/utils/png.ts:51:23) at Function.PNG.load (/node_modules/@pdfme/pdf-lib/src/utils/png.ts:41:42) at Function.for (/node_modules/@pdfme/pdf-lib/src/core/embedders/PngEmbedder.ts:12:21) at _PDFDocument.embedPng (/node_modules/@pdfme/pdf-lib/src/api/PDFDocument.ts:1100:40) at pdfRender2 (/node_modules/@pdfme/schemas/src/barcodes/pdfRender.ts:20:26) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at generate (/node_modules/@pdfme/generator/src/generate.ts:61:9) at generateLabelHandler (/src/handlers/generateLabelHandler.ts:208:29)

To Reproduce

Here is an example of how we are calling the function.

const pdf = await generate({
                    template,
                    inputs,
                    options: { font },
                    plugins: {
                        qrcode: barcodes.qrcode,
                        text
                    }
                });

Expected behavior

Generate the pdf.

Your Environment

- pdfme package(@pdfme/generator or @pdfme/ui): @pdfme/generator
- pdfme version: 
    "@pdfme/common": "^4.3.2",
    "@pdfme/generator": "^4.3.2",
    "@pdfme/schemas": "^4.3.2",
- Operating system: AWS Lambda Functions
- Node.js version or Browser name & version: Node20

Your Error Log

TypeError: import_upng.default.decode is not a function
    at PNG (/node_modules/@pdfme/pdf-lib/src/utils/png.ts:51:23)
    at Function.PNG.load (/node_modules/@pdfme/pdf-lib/src/utils/png.ts:41:42)
    at Function.for (/node_modules/@pdfme/pdf-lib/src/core/embedders/PngEmbedder.ts:12:21)
    at _PDFDocument.embedPng (/node_modules/@pdfme/pdf-lib/src/api/PDFDocument.ts:1100:40)
    at pdfRender2 (/node_modules/@pdfme/schemas/src/barcodes/pdfRender.ts:20:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at generate (/node_modules/@pdfme/generator/src/generate.ts:61:9)
    at generateLabelHandler (/src/handlers/generateLabelHandler.ts:208:29)

Additional context

No response

[peteward]

What build tool are you using?

I've had this problem using esbuild. The problem appears to be that @pdfme/pdf-lib is trying to use the ESM module of @pdf-lib/lib-png which doesn't exist. Only the CommonJS module does.

I worked around this issue by adding a function to force the use of the commonJS module:

const useCjsPlugin = {
  // Simple plugin to tell esbuild to use the CommonJS version of pdf-lib
  // Otherwise it opts for ESM which leads to broken module importing of @pdf-lib/upng,
  // which in it tries to import as ESM when there's no native support for it (and it gets it wrong)
  name: 'use-cjs',
  setup(build) {
    build.onResolve({ filter: /.*/ }, args => {
      const cjsPackages = ['@pdfme/pdf-lib'];

      if (cjsPackages.includes(args.path)) {
        return {
          path: new URL(`./node_modules/${args.path}/cjs/index.js`, import.meta.url).pathname,
          namespace: 'file',
        };
      }
    });
  },
};

const entries = [];
loadLambdaEntries(lambdaDir, entries);

await esbuild.build({
  entryPoints: entries,
  platform: 'node',
  bundle: true,
  outdir: 'build',
  plugins: [useCjsPlugin],
  sourcemap: true,
  external: ['canvas'],
});

However, you are the third person to encounter this now so we should think of a proper solution.

Either there's something in the build config for pdfme/pdf-lib that we can tweak/fix, or we could for pdf-lib/upng and ensure the ESM module gets compiled.

I will try to look at this soon, but for now does the above help you as a workaround?

[AnruStander]

We are using the serverless framework to deploy our functions to AWS Lambda and with version 4 it has built in support for esbuild. I switched it off by adding the following to my serverless.yml file which then allows us to build with commonjs:

build: esbuild: false

This seems to have fixed the issue, but your comment helped us to get to this solution.
Thank you.

[peteward]

OK, I'm glad you sorted it.

Let's keep this issue open because it needs fixing.