Shopify build on production deployment failing unexpectedly (SOS)

Shopify Apps

Topic summary

Production builds of an embedded Shopify app (older Node.js template, deployed on fly.io) began failing with “Uncaught ReferenceError: require is not defined” in the generated index-*.js, while local dev (npm run dev) still works. No code changes were made, suggesting a breaking change in dependencies or the build pipeline.

Key details:

  • Error stems from require() appearing in the final bundle, implying a CommonJS module leaking into an ES module build.
  • Vite config shared; initial setup lacked explicit CommonJS handling.
  • Multiple developers report identical failures; some believe this was triggered by a Shopify-side change. Prior working versions also broke in production.

Resolution/workaround:

  • Update Vite config to enable CommonJS transforms for mixed ES modules:
    build: { commonjsOptions: { transformMixedEsModules: true } }
  • This converts residual require() calls during the production build so the app renders correctly.

Status:

  • Workaround confirmed by the original poster; root cause (Shopify infra vs. dependency change) not established. No official fix noted.

Notes: Screenshots were shared but not essential to the solution.

Summarized with AI on January 17. AI used: gpt-5.
5

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,
    },
  },  
});
2 Likes