Cannot read properties of undefined (reading 'app')

[alessmar]

I get the error below whenever the web client tries to load resources like /assets/index-694b4c0c.css I get:

Cannot read properties of undefined (reading 'app')
at getShopifyApp (/app/node_modules/@paweljedrzejczyk/shopify-multistore-app-middleware/dist/index.js:60:51)
at /app/node_modules/@paweljedrzejczyk/shopify-multistore-app-middleware/dist/index.js:63:24
at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/app/node_modules/express/lib/router/index.js:328:13)
at /app/node_modules/express/lib/router/index.js:286:9
at Function.process_params (/app/node_modules/express/lib/router/index.js:346:12)
at next (/app/node_modules/express/lib/router/index.js:280:10)
at /app/node_modules/@paweljedrzejczyk/shopify-multistore-app-middleware/dist/index.js:56:9
at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/app/node_modules/express/lib/router/index.js:328:13)

below my index.js file:

import { join } from "path";
import { readFileSync } from "fs";
import express from "express";
import serveStatic from "serve-static";
import morgan from "morgan";

import { createShopifyApp, shopifyAppConfig } from "./shopifyMultiApp.js";
import GDPRWebhookHandlers from "./gdpr.js";
import applyApiEndpoint from "./app.js";
import {
  createMultistoreMiddleware,
  useShopifyApp,
} from "@paweljedrzejczyk/shopify-multistore-app-middleware";

const PORT = parseInt(
  process.env.BACKEND_PORT || process.env.PORT || "3000",
  10
);

const STATIC_PATH =
  process.env.NODE_ENV === "production"
    ? `${process.cwd()}/frontend/dist`
    : `${process.cwd()}/frontend/`;

const app = express();
app.use(morgan("combined"));
app.use(express.json());

app.get("/_health", (req, res) => {
  res.status(200).send();
});

app.use(createMultistoreMiddleware(createShopifyApp));

app.get(
  shopifyAppConfig.auth.path,
  useShopifyApp((shopifyApp) => shopifyApp.auth.begin())
);
app.get(
  shopifyAppConfig.auth.callbackPath,
  useShopifyApp((shopifyApp) => shopifyApp.auth.callback()),
  useShopifyApp((shopifyApp) => shopifyApp.redirectToShopifyOrAppRoot())
);
app.post(
  shopifyAppConfig.webhooks.path,
  useShopifyApp((shopifyApp) =>
    shopifyApp.processWebhooks({ webhookHandlers: GDPRWebhookHandlers })
  )
);

app.use(
  "/api/*",
  useShopifyApp((shopifyApp) => shopifyApp.validateAuthenticatedSession())
);

applyApiEndpoint(app);

app.use(useShopifyApp((shopifyApp) => shopifyApp.cspHeaders()));

app.use(serveStatic(STATIC_PATH, { index: false }));

app.use(
  "/*",
  useShopifyApp((shopifyApp) => shopifyApp.ensureInstalledOnShop()),
  async (_req, res, _next) => {
    return res
      .status(200)
      .set("Content-Type", "text/html")
      .send(readFileSync(join(STATIC_PATH, "index.html")));
  }
);

app.listen(PORT);

the dependency declared in package.json is:

"@paweljedrzejczyk/shopify-multistore-app-middleware": "^0.1.0",

Is there anything I can do to avoid this issue?

[alessmar]

@paweljedrzejczyk I was able to fix the issue by creating a specific error handler, like below:

const staticMiddleware = serveStatic(STATIC_PATH, { index: false });

const staticErrorHandler = (error, req, res, next) => {
  console.warn("url:", req.originalUrl, "error:", error.message);

  if(req.originalUrl.startsWith('/assets')) {
    staticMiddleware(req, res, next);
  } else {
    next();
  }
}
....
....
app.use(staticMiddleware);
app.use(
  "/*",
  useShopifyApp((shopifyApp) => shopifyApp.ensureInstalledOnShop()),
  async (_req, res, _next) => {
    return res
      .status(200)
      .set("Content-Type", "text/html")
      .send(readFileSync(join(STATIC_PATH, "index.html")));
  }
);
app.use(staticErrorHandler);