Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I am new to shopify & following this tutorial
Getting below error on running the command
npm run dev
Error: Cannot find module 'qrcode'
The issue I think is in below Qrcode.server.js file
import qrcode from "qrcode"; import invariant from "tiny-invariant"; import db from "../db.server"; export async function getQRCode(id, graphql) { const qrCode = await db.qRCode.findFirst({ where: { id } }); if (!qrCode) { return null; } return supplementQRCode(qrCode, graphql); } export async function getQRCodes(shop, graphql) { const qrCodes = await db.qRCode.findMany({ where: { shop }, orderBy: { id: "desc" }, }); if (qrCodes.length === 0) return []; return Promise.all( qrCodes.map((qrCode) => supplementQRCode(qrCode, graphql)) ); } export function getQRCodeImage(id) { const url = new URL(`/qrcodes/${id}/scan`, process.env.SHOPIFY_APP_URL); return qrcode.toDataURL(url.href); } export function getDestinationUrl(qrCode) { if (qrCode.destination === "product") { return `https://${qrCode.shop}/products/${qrCode.productHandle}`; } const match = /gid:\/\/shopify\/ProductVariant\/([0-9]+)/.exec(qrCode.productVariantId); invariant(match, "Unrecognized product variant ID"); return `https://${qrCode.shop}/cart/${match[1]}:1`; } async function supplementQRCode(qrCode, graphql) { const qrCodeImagePromise = getQRCodeImage(qrCode.id); const response = await graphql( ` query supplementQRCode($id: ID!) { product(id: $id) { title images(first: 1) { nodes { altText url } } } } `, { variables: { id: qrCode.productId, }, } ); const { data: { product }, } = await response.json(); return { ...qrCode, productDeleted: !product?.title, productTitle: product?.title, productImage: product?.images?.nodes[0]?.url, productAlt: product?.images?.nodes[0]?.altText, destinationUrl: getDestinationUrl(qrCode), image: await qrCodeImagePromise, }; } export function validateQRCode(data) { const errors = {}; if (!data.title) { errors.title = "Title is required"; } if (!data.productId) { errors.productId = "Product is required"; } if (!data.destination) { errors.destination = "Destination is required"; } if (Object.keys(errors).length) { return errors; } }
How do I resolve this error. ? Please guide
I had the same problem, it seems that the code in the tutorial contains a UNIX-like syntax when using `~` in the "qrcodes.$id.jsx" file.
The update you need to do:
// this is th old line:
// import { getQRCodeImage } from "~/models/QRCode.server";
// this is the new line:
import { getQRCodeImage } from "../models/QRCode.server";
This is because a file from the "app/route" folder is doing an import from a file in the "app/modules" folder.
Please install qrcode package, I was facing the same issue and resolved it by installing qrcode npm package
npm install --save qrcode
In the same tutorial, I've followed all the steps and when I start the server, I'm getting the following error:
TypeError: Cannot read properties of undefined (reading 'findMany') at Module.getQRCodes (C:\Users\Hp\Test\picking-pro-embedded-v1\app\models\QRCode.server.js:16:35) at loader (C:\Users\Hp\Test\picking-pro-embedded-v1\app\routes\app._index.jsx:21:25) at async Object.callRouteLoader (C:\Users\Hp\Test\picking-pro-embedded-v1\node_modules\@remix-run\server-runtime\dist\data.js:59:16) at async C:\Users\Hp\Test\picking-pro-embedded-v1\node_modules\@remix-run\router\dist\router.cjs.js:4683:21 at async callLoaderOrAction (C:\Users\Hp\Test\picking-pro-embedded-v1\node_modules\@remix-run\router\dist\router.cjs.js:4748:16) at async Promise.all (index 2) at async callDataStrategyImpl (C:\Users\Hp\Test\picking-pro-embedded-v1\node_modules\@remix-run\router\dist\router.cjs.js:4623:17) at async callDataStrategy (C:\Users\Hp\Test\picking-pro-embedded-v1\node_modules\@remix-run\router\dist\router.cjs.js:4111:19) at async loadRouteData (C:\Users\Hp\Test\picking-pro-embedded-v1\node_modules\@remix-run\router\dist\router.cjs.js:4086:19) at async queryImpl (C:\Users\Hp\Test\picking-pro-embedded-v1\node_modules\@remix-run\router\dist\router.cjs.js:3931:20)
Can anyone assist with this please?
Thanks
Naz
Run the following command
npm install qrcode
if you are using tiny-variant than run the following command
npm install tiny-invariant
you can try to replace
import qrcode from "qrcode";
to
import qrcode from "qrcode/lib/server.js";
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025