PHP App Template Deployment with Docker Failing - require is not defined

Retired Boards Appdev Shopify Apis And Technology
1

I’m building my first Shopify app, so this may be something I’m overlooking, but I’ve been trying unsuccessfully to deploy the app that’s using the default Shopify PHP App Template for the back end (which uses the react front end template) to deploy with Docker (using the default dockerfile) and a MySQL database. It’s an embedded app. It runs fine when I use npm run dev, but when I try to build/deploy it with Docker, on the admin dashboard page it returns a console error and an empty page:

Uncaught ReferenceError: require is not defined
    at index-63ad0d09.js:69:258270
(anonymous) @ index-63ad0d09.js:69

Upon inspecting that line, I see:

var wP = require("react")
  , jI = wP.isValidElement
  , FI = wP.cloneElement
  , DI = []
  , $I = DI.forEach;
function UI(e) {
    for (var t = arguments.length, n = new Array(t > 1 ? t - 1 : 0), r = 1; r < t; r++)
        n[r - 1] = arguments[r];
    return $I.call(n, function(i) {
        if (i)
            for (var o in i)
                e[o] === void 0 && (e[o] = i[o])
    }),
    e
}

I found a post about updating the @Shopify_77 /i18next-shopify package.json entry to version 0.2.9, which I’ve done, but the problem persists.

I’ve also tried doing it with a fresh download of the template with no custom code on it and the error remains the same, so I think it is unlikely to be an issue with my actual code, and since it runs fine when using npm run dev, it seems like it’s maybe something in the configuration, but the Dockerfile is pretty standard, the only thing I changed was removing the part about creating the sqlite DB.

We have it hosted on AWS currently, but I’m getting the same error when using Ngrok and a cloudflare tunnel locally as we do with the staging version. My .env file contains the following variables, maybe I have some extra variables that are messing it up, or I’m missing some? They’re all being passed to the build via a terraform/gitlab/AWS pipeline:

APP_NAME="App Name"
APP_ENV=local
APP_KEY=key_here
APP_DEBUG=true
APP_URL=appurl.com
LOG_CHANNEL=stack
LOG_LEVEL=debug

HOST=310c-2601-extra-numbers.ngrok-free.app (or staging app url)
PORT=8080

DB_CONNECTION=mysql
DB_PORT=3306
DATABASE_URL=mysql://root:@host.docker.internal:3306/test_app_local (has to have the internal host docker for mysql or it gives a DB connection error and doesn't authenticate)

SENDGRID_API_KEY=SG.api_key

SHOPIFY_API_KEY=key_here
SHOPIFY_API_SECRET=secret_here
SCOPES=write_themes,read_themes,write_products,read_products,read_customers,read_discounts,read_files,write_files,read_fulfillments,write_fulfillments,read_gift_cards,write_gift_cards,write_merchant_managed_fulfillment_orders,read_merchant_managed_fulfillment_orders,write_metaobject_definitions,read_metaobject_definitions,write_metaobjects,read_metaobjects,read_order_edits,write_orders,read_orders,read_price_rules,write_reports,read_reports,read_shipping,write_gates,read_gates,read_assigned_fulfillment_orders,read_merchant_managed_fulfillment_orders,read_third_party_fulfillment_orders,read_inventory,write_draft_orders

# these line up perfectly with my partner dashboard, though it may have a few extra unneeded paths or maybe missing some?
SHOPIFY_REDIRECT_URI=https://app.host
SHOPIFY_REDIRECT_URL=https://app.host/api/auth,https://app.host/auth/callback,https://app.host/auth/shopify/callback,app.host/api/auth/callback,https://app.host/admin/oauth/callback,https://app.host/admin/oauth

And here’s my package.json in the web/frontend folder:

{
  "name": "shopify-frontend-template-react",
  "version": "1.0.0",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "build": "vite build --debug",
    "dev": "vite",
    "coverage": "vitest run --coverage"
  },
  "type": "module",
  "engines": {
    "node": ">= 12.16"
  },
  "stylelint": {
    "extends": "@shopify/stylelint-polaris"
  },
  "dependencies": {
    "@formatjs/intl-locale": "^3.3.2",
    "@formatjs/intl-localematcher": "^0.4.0",
    "@formatjs/intl-pluralrules": "^5.2.4",
    "@shopify/app-bridge": "^3.7.7",
    "@shopify/app-bridge-react": "^3.7.7",
    "@shopify/i18next-shopify": "^0.2.9",
    "@shopify/polaris": "^10.49.1",
    "@shopify/react-form": "^2.5.5",
    "@shopify/react-hooks": "^3.0.5",
    "@vitejs/plugin-react": "1.2.0",
    "dayjs": "^1.11.9",
    "i18next": "^23.1.0",
    "i18next-resources-to-backend": "^1.1.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^13.0.0",
    "react-query": "^3.34.19",
    "react-router-dom": "^6.3.0",
    "vite": "^4.3.9",
    "vite-plugin-require": "^1.1.11"
  },
  "devDependencies": {
    "@shopify/stylelint-polaris": "^12.0.0",
    "history": "^5.3.0",
    "jsdom": "^19.0.0",
    "prettier": "^2.6.0",
    "stylelint": "^15.6.1",
    "vi-fetch": "^0.6.1"
  }
}

My vite.config.js file is mostly the same as the default template, the only change being that I added this at the end of the defineConfig function based on another post I read yesterday:

  build: {
    commonjsOptions: {
      transformMixedEsModules: true
    }
  },

I didn’t add any extra proxy rules because they didn’t seem to be needed when running with npm run dev.

What am I missing?! I’m going mad!