Why can't I find the 'qrcode' module in my new project?

nikhilmanahs
Shopify Partner
1 0 0

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

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Replies 2 (2)

Yam1
Shopify Partner
1 0 0

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.

ahmadamjad09
Shopify Partner
3 0 2

Please install qrcode package, I was facing the same issue and resolved it by installing qrcode npm package 

npm install --save qrcode