Remix vite Built completed but deployment stuck on heroku

[techaccounts]

Hi,
My app is stuck in build process, Built is completed but not getting deployed on heroku, I have added discounts module to my app,

remote: build/client/assets/hooks-DMPujAxN.js 30.75 kB │ gzip: 11.15 kB
remote: build/client/assets/app-YP2J4bfO.js 58.77 kB │ gzip: 20.87 kB
remote: build/client/assets/Page-DqpEG4Qe.js 88.15 kB │ gzip: 27.03 kB
remote: build/client/assets/context-Ct1ktd-z.js 154.70 kB │ gzip: 17.72 kB
remote: build/client/assets/UsageLimitsCard-DHU8EKpm.js 160.46 kB │ gzip: 54.58 kB
remote: build/client/assets/components-vxmObLVZ.js 255.81 kB │ gzip: 82.35 kB
remote:  built in 4.49s

vite.config

import { vitePlugin as remix } from "@remix-run/dev";

// import { unstable_vitePlugin as remix } from "@remix-run/dev";

// import * as remixDev from "@remix-run/dev";

// const remix = remixDev.vitePlugin;

import { defineConfig } from "vite";

import tsconfigPaths from "vite-tsconfig-paths";

// Related: https://github.com/remix-run/remix/issues/2835#issuecomment-1144102176

// Replace the HOST env var with SHOPIFY_APP_URL so that it doesn't break the remix server. The CLI will eventually

// stop passing in HOST, so we can remove this workaround after the next major release.

if (

process.env.HOST &&

(!process.env.SHOPIFY_APP_URL ||

process.env.SHOPIFY_APP_URL === process.env.HOST)

) {

process.env.SHOPIFY_APP_URL = process.env.HOST;

delete process.env.HOST;

}

const host = new URL(process.env.SHOPIFY_APP_URL || "http://localhost")

.hostname;

let hmrConfig;

if (host === "localhost") {

hmrConfig = {

protocol: "ws",

host: "localhost",

port: 64999,

clientPort: 64999,

};

} else {

hmrConfig = {

protocol: "wss",

host: host,

port: parseInt(process.env.FRONTEND_PORT) || 8002,

clientPort: 443,

};

}

export default defineConfig({

server: {

port: Number(process.env.PORT || 3000),

hmr: hmrConfig,

fs: {

// See https://vitejs.dev/config/server-options.html#server-fs-allow for more information

allow: [

"app",

"node_modules/@shopify/polaris/build/esm/styles.css",

"node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx",

],

},

},

plugins: [

remix({

ignoredRouteFiles: ["**/.*"],

}),

tsconfigPaths(),

],

build: {

assetsInlineLimit: 0,

},

});

package.json

{

"name": "pilgrim-latest",

"private": true,

"scripts": {

"build": "vite build && vite build --ssr",

"dev": "shopify app dev",

"config:link": "shopify app config link",

"generate": "shopify app generate",

"deploy": "shopify app deploy",

"config:use": "shopify app config use",

"env": "shopify app env",

"start": "remix-serve ./build/server/index.js",

"docker-start": "npm run setup && npm run start",

"setup": "prisma generate && prisma migrate deploy",

"lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",

"shopify": "shopify",

"prisma": "prisma",

"graphql-codegen": "graphql-codegen",

"vite": "vite"

},

"type": "module",

"dependencies": {

"@prisma/client": "^5.8.0",

"@remix-run/dev": "^2.7.1",

"@remix-run/node": "^2.7.1",

"@remix-run/react": "^2.7.1",

"@remix-run/serve": "^2.7.1",

"@shopify/app": "^3.15.0",

"@shopify/cli": "^3.70.0",

"@shopify/discount-app-components": "^3.0.1",

"@shopify/polaris": "^12.0.0",

"@shopify/react-form": "^2.7.3",

"@shopify/shopify-api": "^9.2.0",

"@shopify/shopify-app-remix": "^2.5.0",

"@shopify/shopify-app-session-storage-prisma": "^4.0.1",

"isbot": "^5.1.0",

"prisma": "^5.8.0",

"react": "^18.2.0",

"react-dom": "^18.2.0",

"vite-tsconfig-paths": "^4.3.1"

},

"devDependencies": {

"@remix-run/eslint-config": "^2.7.1",

"@shopify/api-codegen-preset": "^0.0.3",

"@shopify/app-bridge-types": "^0.0.7",

"@types/eslint": "^8.40.0",

"@types/node": "^20.6.3",

"@types/react": "^18.2.31",

"@types/react-dom": "^18.2.14",

"eslint": "^8.42.0",

"eslint-config-prettier": "^9.1.0",

"prettier": "^3.2.4",

"typescript": "^5.2.2",

"vite": "^5.1.3"

},

"workspaces": [

"extensions/*"

],

"trustedDependencies": [

"@shopify/plugin-cloudflare"

],

"author": "dee"

}

[dani_sanomads]

@techaccounts , Kindly share the Heroku error or logs here.

[techaccounts]

logs

remote: Digest: sha256:7e43a2d633d91e8655a6c0f45d2ed987aa4930f0792f6d9dd3bffc7496e44882
remote: Status: Downloaded newer image for node:18-alpine
remote: ---> 870e987bd793
remote: Step 2/10 : EXPOSE 3000
remote: ---> Running in cee7c365426e
remote: Removing intermediate container cee7c365426e
remote: ---> ba16b97a783d
remote: Step 3/10 : WORKDIR /app
remote: ---> Running in ce55e3b8c412
remote: Removing intermediate container ce55e3b8c412
remote: ---> 480ab20e18d8
remote: Step 4/10 : COPY . .
remote: ---> fd58a66383a0
remote: Step 5/10 : ENV NODE_ENV=production
remote: ---> Running in ee765b859a92
remote: Removing intermediate container ee765b859a92
remote: ---> fc6d55689cc9
remote: Step 6/10 : RUN npm install --omit=dev
remote: ---> Running in 6684cdd871a1
remote: npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
remote: npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
remote: npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
remote: npm warn deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
remote: npm warn deprecated @Shopify/function-runner@4.1.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
remote: npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
remote: npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
remote: npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
remote: npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
remote: npm warn deprecated glob@8.1.0: Glob versions prior to v9 are no longer supported
remote: npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
remote:
remote: added 1327 packages, and audited 1332 packages in 1m
remote:
remote: 266 packages are looking for funding
remote: run `npm fund` for details
remote:
remote: 28 vulnerabilities (10 low, 1 moderate, 17 high)
remote:
remote: To address issues that do not require attention, run:
remote: npm audit fix
remote:
remote: To address all issues possible (including breaking changes), run:
remote: npm audit fix --force
remote:
remote: Some issues need review, and may require choosing
remote: a different dependency.
remote:
remote: Run `npm audit` for details.
remote: npm notice
remote: npm notice New minor version of npm available! 10.8.2 -> 10.9.1
remote: npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.1
remote: npm notice To update run: npm install -g npm@10.9.1
remote: npm notice
remote: Removing intermediate container 6684cdd871a1
remote: ---> f34172a651ae
remote: Step 7/10 : RUN npm remove @Shopify/app @Shopify/cli
remote: ---> Running in adbbecab8076
remote:
remote: added 1 package, removed 358 packages, and audited 960 packages in 22s
remote:
remote: 187 packages are looking for funding
remote: run `npm fund` for details
remote:
remote: 14 vulnerabilities (8 low, 6 high)
remote:
remote: To address issues that do not require attention, run:
remote: npm audit fix
remote:
remote: To address all issues possible (including breaking changes), run:
remote: npm audit fix --force
remote:
remote: Some issues need review, and may require choosing
remote: a different dependency.
remote:
remote: Run `npm audit` for details.
remote: Removing intermediate container adbbecab8076
remote: ---> 6e81d8ae3b10
remote: Step 8/10 : RUN npm run build
remote: ---> Running in 0415a3dcbdbf
remote:
remote: > build
remote: > vite build && vite build --ssr
remote:
remote: [warn] Fetcher persistence behavior is changing in React Router v7
remote: ┃ You can use the `v3_fetcherPersist` future flag to opt-in early.
remote: ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_fetcherPersist
remote: ┗
remote: [warn] Route discovery/manifest behavior is changing in React Router v7
remote: ┃ You can use the `v3_lazyRouteDiscovery` future flag to opt-in early.
remote: ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_lazyRouteDiscovery
remote: ┗
remote: [warn] Relative routing behavior for splat routes is changing in React Router v7
remote: ┃ You can use the `v3_relativeSplatPath` future flag to opt-in early.
remote: ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_relativeSplatPath
remote: ┗
remote: [warn] Data fetching is changing to a single fetch in React Router v7
remote: ┃ You can use the `v3_singleFetch` future flag to opt-in early.
remote: ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_singleFetch
remote: ┗
remote: [warn] The format of errors thrown on aborted requests is changing in React Router v7
remote: ┃ You can use the `v3_throwAbortReason` future flag to opt-in early.
remote: ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_throwAbortReason
remote: ┗
remote: vite v5.4.11 building for production...
remote: transforming...
remote:  2298 modules transformed.
remote: Generated an empty chunk: "webhooks".
remote: Generated an empty chunk: "auth._".
remote: rendering chunks...
remote: computing gzip size...
remote: build/client/.vite/manifest.json 5.81 kB │ gzip: 0.84 kB
remote: build/client/assets/route-TqOIn4DE.css 0.76 kB │ gzip: 0.35 kB
remote: build/client/assets/styles-BeiPL2RV.css 444.11 kB │ gzip: 52.26 kB
remote: build/client/assets/webhooks-l0sNRNKZ.js 0.00 kB │ gzip: 0.02 kB
remote: build/client/assets/auth._-l0sNRNKZ.js 0.00 kB │ gzip: 0.02 kB
remote: build/client/assets/app._index-9bql8NaK.js 0.60 kB │ gzip: 0.39 kB
remote: build/client/assets/route-D95mKwxh.js 0.73 kB │ gzip: 0.45 kB
remote: build/client/assets/FormLayout-C2QhicwG.js 0.96 kB │ gzip: 0.53 kB
remote: build/client/assets/List-BT9mjVjF.js 1.15 kB │ gzip: 0.57 kB
remote: build/client/assets/route-Cm_YdLkj.js 1.48 kB │ gzip: 0.60 kB
remote: build/client/assets/root-Bwa-7C-S.js 1.50 kB │ gzip: 0.86 kB
remote: build/client/assets/Layout-Dx_qR71g.js 1.60 kB │ gzip: 0.58 kB
remote: build/client/assets/app.coupon-creator-limit._functionId.new-CZZHH94r.js 3.64 kB │ gzip: 1.58 kB
remote: build/client/assets/entry.client-BEugn94G.js 3.70 kB │ gzip: 1.41 kB
remote: build/client/assets/styles-DttPps5n.js 5.92 kB │ gzip: 2.42 kB
remote: build/client/assets/app.coupon-creator._functionId.new-DRth0-s0.js 6.07 kB │ gzip: 2.19 kB
remote: build/client/assets/app.coupon-details-CoDUFU7L.js 7.25 kB │ gzip: 2.90 kB
remote: build/client/assets/hooks-DMPujAxN.js 30.75 kB │ gzip: 11.15 kB
remote: build/client/assets/app-YP2J4bfO.js 58.77 kB │ gzip: 20.87 kB
remote: build/client/assets/Page-DqpEG4Qe.js 88.15 kB │ gzip: 27.03 kB
remote: build/client/assets/context-Ct1ktd-z.js 154.70 kB │ gzip: 17.72 kB
remote: build/client/assets/UsageLimitsCard-DHU8EKpm.js 160.46 kB │ gzip: 54.58 kB
remote: build/client/assets/components-vxmObLVZ.js 255.81 kB │ gzip: 82.35 kB
remote:  built in 4.49s

[TheodorFreundHT]

I actually am encountering the same error since yesterday.
We run the build in google cloud build, but it has the same behaviour if trying locally.
The issue is that the vite command hangs after the step where the console log says "built in 12.34s"
We rolled back the repo to the last build that ran last week and same issue.
I used my local dev environment and ran the build command through the cli, same effect.
The docker container, that usually is used for the install also fails locally.
We then implemented this error tracker (first answer) : https://stackoverflow.com/questions/75839993/vite-build-hangs-forever
And to my absolute amazement it just works now.
This is by no means solved, but it seems to be an underlying issue in the vite components of the build process and this at least lets us build

[TheodorFreundHT]

Update:
I tried to run this using the cloud build. I got the following issue:

Build ended
Step #0 - "build docker image": 1914 modules transformed.
Step #0 - "build docker image": Build ended
Step #0 - "build docker image": Bundle closed
Step #0 - "build docker image": [warn] Fetcher persistence behavior is changing in React Router v7
Step #0 - "build docker image": ┃ You can use the `v3_fetcherPersist` future flag to opt-in early.
Step #0 - "build docker image": ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_fetcherPersist
Step #0 - "build docker image": ┗
Step #0 - "build docker image": [warn] Route discovery/manifest behavior is changing in React Router v7
Step #0 - "build docker image": ┃ You can use the `v3_lazyRouteDiscovery` future flag to opt-in early.
Step #0 - "build docker image": ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_lazyRouteDiscovery
Step #0 - "build docker image": ┗
Step #0 - "build docker image": [warn] Relative routing behavior for splat routes is changing in React Router v7
Step #0 - "build docker image": ┃ You can use the `v3_relativeSplatPath` future flag to opt-in early.
Step #0 - "build docker image": ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_relativeSplatPath
Step #0 - "build docker image": ┗
Step #0 - "build docker image": [warn] Data fetching is changing to a single fetch in React Router v7
Step #0 - "build docker image": ┃ You can use the `v3_singleFetch` future flag to opt-in early.
Step #0 - "build docker image": ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_singleFetch
Step #0 - "build docker image": ┗
Step #0 - "build docker image": [warn] The format of errors thrown on aborted requests is changing in React Router v7
Step #0 - "build docker image": ┃ You can use the `v3_throwAbortReason` future flag to opt-in early.
Step #0 - "build docker image": ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_throwAbortReason
Step #0 - "build docker image": ┗
Step #0 - "build docker image": vite v5.4.11 building SSR bundle for production...
Step #0 - "build docker image": transforming...
Step #0 - "build docker image": Error bundling
Step #0 - "build docker image": [Error: Could not load virtual:remix/server-manifest (imported by virtual:remix/server-build): ENOENT: no such file or directory, open '/app/build/client/.vite/manifest.json'] {
Step #0 - "build docker image":   errno: -2,
Step #0 - "build docker image":   code: 'PLUGIN_ERROR',
Step #0 - "build docker image":   syscall: 'open',
Step #0 - "build docker image":   path: '/app/build/client/.vite/manifest.json',
Step #0 - "build docker image":   pluginCode: 'ENOENT',
Step #0 - "build docker image":   plugin: 'remix-virtual-modules',
Step #0 - "build docker image":   hook: 'load'
Step #0 - "build docker image": }
Step #0 - "build docker image": The command '/bin/sh -c npm run build' returned a non-zero code: 1

the npm command consists of "vite build && vite build -ssr" and it seems that the second step is failing.
I saw that there was a mention of vite ssr in the recent changelogs, which would coincide with the problems we are facing as our last build is from the 12th of November.

NOTE: In the google log it shows a "null" value right as first character of  "[null]virtual:remix/server-manifest" in the line

Step #0 - "build docker image": [Error: Could not load virtual:remix/server-manifest (imported by virtual:remix/server-build): ENOENT: no such file or directory, open '/app/build/client/.vite/manifest.json'] {
but it doesnt transport here

Update 2:
Screenshots of the null values:
https://imgur.com/vZtF9Sj

https://i.imgur.com/InZXAWY.png

[Dan_UX]

Hi @TheodorFreundHT, @techaccounts,

Having the same issue on all our Heroku deployments at the moment 😞

I found and integrated the same stack overflow solution you did and had this same issue above - effectively, the process exit command fires before the initial build generates the files (hence the missing manifest).  I worked around this on our builds with a simple setTimeout() of 10 seconds for now.

If you replace the closeBundle() function in the plugin with the below, it'll wait 10 secs which is enough time for our files to build before exiting.  You can also remove the buildEnd() function as it is not required.

closeBundle() {
  console.log('Bundle closed');
  setTimeout(() => {
    process.exit(0);
  }, 10000);
},

Not 100% sure on the root cause but planning to take a look a bit deeper when I get more time!  Needed this workaround to get a few extensions out before Black Friday 🙂

[KarinaHTV]

hi 
I have just tried to rerun the cloudbuild of my other app and it had no issues.
And app my colleague was talking about was finally build too without any change from my side. cc @TheodorFreundHT 😉
@Dan_UX try again with yours app, should be ok

upd: Have just checked vite github.
https://github.com/vitejs

they pushed fix 15 minutes ago

[Dan_UX]

Thanks @KarinaHTV - good to know.  

Have just tested this and the original issue still persists with Heroku my side.

When removing the setTimeout from the workaround, the build no longer fails but the assets do not get built so anything using UI elements does not load within the app for me.

So, for now, have reverted back to my solution above!

[techaccounts]

Hi i spoke with heroku and they said it's some node js issue in Linux kernel. they are taking look at issue and will reply