Shopify build on production deployment failing unexpectedly (SOS)

[Giltee]

Hi,

I have an app that is using the previous node js template, and deployed on fly.io. Last week it was up and running without problem, I moved back to my dev environment for a couple touch ups. Now when I switch back my redirect URL's to my fly.io app react is not being recognized in the index.js file in the asset output file of the embedded app. 

index-d27b9a09.js:79 Uncaught ReferenceError: require is not defined
    at index-d27b9a09.js:79:72236

The funny thing is that this works completely fine if I just run my app locally:

npm run dev

I noticed that I no longer have the banner that shopify plans to upgrade me to simplified deployment (i believe that's what it was called). Could this be the cause of the failures? If so does anyone know how I can fix the build process? Thanks in advance. 

[Giltee]

Could really use some help on this. Updated details below:

The frontend build for my shopify app has all of sudden started to error out. I haven't made code changes since so there is something up with packages or some breaking change.
Running the app locally still works without issue but as soon as I build to production the embedded fails to render:

index-d27b9a09.js:79 Uncaught ReferenceError: require is not defined
    at index-d27b9a09.js:79:72236

This is due to the require statement being outputted into the index.js bundle but this was not occcuring previously.Below is my vite configuration:

import { defineConfig } from "vite";
import { dirname } from "path";
import { fileURLToPath } from "url";
import https from "https";
import react from "@vitejs/plugin-react";

if (
  process.env.npm_lifecycle_event === "build" &&
  !process.env.CI &&
  !process.env.SHOPIFY_API_KEY
) {
  console.warn(
    "\nBuilding the frontend app without an API key. The frontend build will not run without an API key. Set the SHOPIFY_API_KEY environment variable when running the build command.\n"
  );
}

const proxyOptions = {
  target: `http://127.0.0.1:${process.env.BACKEND_PORT}`,
  changeOrigin: false,
  secure: true,
  ws: false,
};

const host = process.env.HOST
  ? process.env.HOST.replace(/https?:\/\//, "")
  : "localhost";

let hmrConfig;
if (host === "localhost") {
  hmrConfig = {
    protocol: "ws",
    host: "localhost",
    port: 64999,
    clientPort: 64999,
  };
} else {
  hmrConfig = {
    protocol: "wss",
    host: host,
    port: process.env.FRONTEND_PORT,
    clientPort: 443,
  };
}

export default defineConfig({
  root: dirname(fileURLToPath(import.meta.url)),
  plugins: [react()],
  define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
  },
  resolve: {
    preserveSymlinks: true,
  },
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,
      "^/bundle/checkout(\\?.*)?$": proxyOptions,
    },
  },  
});

From what I have researched the fix potentially could be to add the commonjs transformations to the vite build to be able to support the require statement versus the import. I am just confused on why this would be necessary now as it was not before and I was importing react without issue. Just want to make sure im going down the right rabbit hole here and would be nice to understand why this is occurring.

[Shahaab_Manzar]

Facing the same issue, were you able to resolve it? 

Please let me know

[samir-growwx]

Facing the exact same issue and got completely stuck. The previous version of the App has stopped working too. @Shopify Team : This is a CRITICAL issue and definitely a bug at your side.

Can some-one look into this at priority ?

[Giltee · Accepted solution]

Hey Samir, the shopify team totally borked this one and have provided absolutely sub standard service when addressing them about the issue. The solution is below, update your vite.config with the commonJs transformations as such:

export default defineConfig({
  root: dirname(fileURLToPath(import.meta.url)),
  plugins: [react()],
  define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
  },
  // ADD THIS LINE TO CONVERT THE require() 
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    }
  },
  // END LINE
  resolve: {
    preserveSymlinks: true,
  },
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\\?.*)?$": proxyOptions,
      "^/api(/|(\\?.*)?$)": proxyOptions,
      "^/bundle/checkout(\\?.*)?$": proxyOptions,
    },
  },  
});