CF pages function can not use third party nodejs package

can the CF pages function use the third party packages ?

thanks a lot, i am validating my idea with CF pages.

Depends on the package. Most packages sure, but anything that requires some of the built-in node ones may not work.

1 Like

thank you for replying. this is the code in my ./functions folder, i just copy this code from workers example.(has fix the ‘onRequest’ to be Compatible with pages function )

import qr from 'qr-image';

export async function onRequest(context) {
  if (context.request.method === "POST") {
    return generateQRCode(context.request);
  }

  return new Response(landing, {
    headers: {
      "Content-Type": "text/html",
    },
  });
}

async function generateQRCode(request) {
  const { text } = await request.json();
  const headers = { "Content-Type": "image/png" };
  const qr_png = qr.imageSync(text || "https://workers.dev");

  return new Response(qr_png, { headers });
}

const landing = `
<h1>QR Generator</h1>
<p>Click the below button to generate a new QR code. This will make a request to your Worker.</p>
<input type="text" id="text" value="https://workers.dev"></input>
<button onclick="generate()">Generate QR Code</button>
<p>Generated QR Code Image</p>
<img id="qr" src="#" />
<script>
	function generate() {
		fetch(window.location.pathname, {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ text: document.querySelector("#text").value })
		})
		.then(response => response.blob())
		.then(blob => {
			const reader = new FileReader();
			reader.onloadend = function () {
				document.querySelector("#qr").src = reader.result; // Update the image source with the newly generated QR code
			}
			reader.readAsDataURL(blob);
		})
	}
</script>
`;

and this build logs are

10:53:56.152	Success: Finished cloning repository files
10:53:56.935	No build command specified. Skipping build step.
10:53:56.936	Found Functions directory at /functions. Uploading.
10:53:58.488	✘ [ERROR] 1 error(s) and 0 warning(s) when compiling Worker.
10:53:58.489	
10:53:58.489	
10:53:58.492	
10:53:58.495	✘ [ERROR] Could not resolve "qr-image"
10:53:58.498	
10:53:58.499	    api/qr.js:1:15:
10:53:58.499	      1 │ import qr from 'qr-image';
10:53:58.499	        ╵                ~~~~~~~~~~
10:53:58.499	
10:53:58.499	  You can mark the path "qr-image" as external to exclude it from the bundle, which will remove this error.
10:53:58.501	
10:53:58.501	
10:53:58.501	✘ [ERROR] Build failed with 1 error:
10:53:58.501	
10:53:58.502	  api/qr.js:1:15: ERROR: Could not resolve "qr-image"
10:53:58.502	
10:53:58.502	
10:53:58.513	Failed building Pages Functions.
10:53:59.442	Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

Have you done npm install qr-image?

2 Likes

yes, i add the command npm i in the pages settings’ build command option;

it works.

thanks a lot.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.