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

[nikhilmanahs]

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

[Yam1]

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]

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

npm install --save qrcode

[NazSaveCo]

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

[Saiful-here]

Run the following command

npm install qrcode

if you are using tiny-variant than run the following command

npm install tiny-invariant