Hey guys. Unfortunately, it is not possible to set up the project due to two errors. Been trying to get the project to run for hours.

Error 1: Abort [Error]: The CLIKitStore instance hasn't been initialized - The CLIKitStore instance hasn't been initialized in line 35 @ next.config.mjs before session.ensureAuthenticatedPartners(); is called. I couldn't find any documentation on @shopify/cli-kit and trying await store.initializeCliKitStore(); in line 34 doesn't seem to work either. How do I initialize the store before the session is authenticated?

Error 2: AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided - Whether I comment out the host in line 62 @ next.config.mjs or not, the host seems to be non-resolvable. Do I need to define an additional host in the dotenv? HOST=https://localhost does not seem to work for me, even tho I set it as URL in the Shopify Plugin. Is there a solution for this?

I would be very grateful for any solutions and advice and thank you in advance.

Have a nice evening everyone :)

Hello! Thanks for the awesome work, in case you know what's up, I tried to add cli3 inside the app and then I completely destroyed it.

When running the npm run dev I get , Variable $applicationUrl of type Url! was provided invalid value: {"response":{"errors":[{"message":"Variable $applicationUrl of type Url! was provided

Its around this line ShopifyCli.mjs file const result = await api.partners.request(query, token, variables);

Although all the strings are looking ok it expects a type of URL

I removed everything and the folders, cloned again etc, I installed everything again with force and npm audit fix but no luck. Let me know if you have any idea! Thanks

Hi! After following all the steps, when running npm run dev, the software runs into an error. Output is:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from [my-path]\.env
Abort [Error]: The CLIKitStore instance hasn't been initialized
    at cliKitStore (file:///[MY-APP-PATH]/node_modules/@shopify/cli-kit/dist/store.js:28:15)
    ......

Ani ideas why that is?

Deprecation: The CustomProperties component has been deprecated. See the v10 migration guide for replacing dark color scheme styles. https://github.com/Shopify/polaris/blob/main/documentation/guides/migrating-from-v9-to-v10.md

Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error

How do I fix this?

I've been playing around with Shopify OAuth a little bit again and I might discover a way of not doing too many requests into the callback endpoints.

I realised if I tweak a little bit the code of the session storage file, at the callback endpoint we would have to persist a second time the shop into Redis!

There are only two cases during Shopify OAuth that need to be handled! We know that Shopify uses session.id from the SessionInterface, the ID can vary between a uuidv4 string and the shop URL with a suffixed number like this: .myshopify.com_123456789.

Suffice to say, that we only need to handle the storeCallback and the loadCallback to make this work, let's see some code:

const SHOPIFY_DOMAIN = ".myshopify.com";

const storeCallback = async (session: SessionInterface): Promise<boolean> => {
  const result = await redis.set(
    session.id.includes(SHOPIFY_DOMAIN) ? session.shop : session.id,
    JSON.stringify(session),
    session.id.includes("offline") ? {} : { ex: 36000 }
  );

  return result === "OK";
};

const getShopDomainIfPresent = (shopId: string): string | null => {
  if (shopId.includes(SHOPIFY_DOMAIN)) {
    return shopId.substring(0, shopId.indexOf("_"));
  }

  return null;
};

const loadCallback = async (shopId: string): Promise<SessionInterface | { [key: string]: unknown } | undefined> => {
  const result = await redis.get<Promise<SessionInterface | null>>(getShopDomainIfPresent(shopId) || shopId);

  return result ?? undefined;
};

const deleteCallback = async (shopId: string): Promise<boolean> => {
  const result = await redis.del(getShopDomainIfPresent(shopId) || shopId);

  return result > 0;
};

By doing this, this piece of code is now obsolete benefiting from fewer calls at the callback endpoint!

      const redis = new Redis({
        url: process.env.UPSTASH_REDIS_REST_URL as string,
        token: process.env.UPSTASH_REDIS_REST_TOKEN as string
      });

      const redisShop = await redis.get(session.shop);
      if (!redisShop || redisShop !== process.env.SCOPES) {
        await redis.set(session.shop, session);
      }

Received this error after running pnpm install and npm run on a new clone of the project. Using version 3.0.25 of @shopify/cli-kit.

TypeError: cliKitStore.initializeCliKitStore is not a function
    at setEnvironmentAndReturnHost (file:///Users/user/app/next.config.mjs:37:21)
    at config (file:///Users/user/app/next.config.mjs:66:18)
    at Object.normalizeConfig (/Users/user/app/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/server/config-shared.ts:556:14)
    at Object.loadConfig [as default] (/Users/user/app/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/server/config.ts:799:6)
    at NextServer.prepare (/Users/user/app/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/server/next.ts:110:20)
    at /Users/user/app/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/cli/next-dev.ts:107:

Console log of cliKitStore:

cliKitStore [Object: null prototype] {
  createConf: [Function: createConf],
  remove: [Function: remove$2],
  getAppInfo: [Function: getAppInfo],
  setAppInfo: [Function: setAppInfo],
  clearAppInfo: [Function: clearAppInfo],
  getTheme: [Function: getTheme],
  setTheme: [Function: setTheme],
  getSession: [Function: getSession],
  setSession: [Function: setSession],
  removeSession: [Function: removeSession]
}

I removed the offline access tokens endpoint as my app won't need to contact Shopify API without the user consentiment.

So my middleware ends up like this:

    const urlParams = new URLSearchParams(req.url?.split('?')[1]);
    const {shop} = Object.fromEntries(urlParams);

    if (
        req.nextUrl.pathname.startsWith('/api/auth') ||
        req.nextUrl.pathname.startsWith('/api/webhooks')
    ) {
        return NextResponse.next();
    }

    if (req.nextUrl.pathname.startsWith('/api')) {
        return await withShopifyMiddleware(req, shop);
    }

    if (shop) {
        const shopSession = await findShopByShopDomain(shop)
        console.info(shopSession)

        if (!shopSession) {
            return NextResponse.redirect(
                `${process.env.HOST}/api/auth/?shop=${shop}`
            );
        }

        return NextResponse.next({
            headers: {
                'Content-Security-Policy': `frame-ancestors https://${shop} https://admin.shopify.com;`,
            },
        });
    }

    return NextResponse.next();

I also changed a few things here and there and now Cookies are gone after the app rich is embedded state and

   const bearerPresent = req.headers.get('authorization')?.match(/Bearer (.*)/);

is always undefined!

@carstenlebek Any thoughts on why this might append?

Changing the strategy to persist the host from session storage to storing it in the window object. The reasoning for this is, that the access to session storage is denied in incognito modes of browsers.

Hi, The helper returnToLevelRedirection function (line 15) points to ${process.env.HOST}/api/auth?shop=clebek.myshopify.com. Should it be redirectUrl instead?

Thanks!!!

Fix for this error when deploying to Heroku:

destination does not start with /, http://, or https:// for route {"source":"/api/:path*","destination":"${host}/api/:path*"}

Hi there,

Thanks for making this amazing template, really helps to make shopify app dev much easier. I'm currently hoping to add in some extensions, in particular the checkout button ( Something like this : https://shopify.dev/apps/checkout/delivery-instructions )

How do you suggest doing so? Not too sure how i might go about doing so since the layout of the folder is a bit different as compared to the scaffolded one by shopify-cli