Main issue: Deploying a Remix-based Shopify app failed during build with “Route config in routes.js is invalid… Failed to load @remix-run/fs-routes.” This occurred on Heroku and was also reported on Fly.io.
Resolution for build error: Move @remix-run/fs-routes from devDependencies to dependencies in package.json. Multiple confirmations that this change fixed the build.
Follow-on problem: After the build fix, the app crashed at runtime on Heroku with Prisma errors/warnings:
Suggested remedy: Add specific lines to the Dockerfile to address the Prisma/OpenSSL issue. An image containing the exact code snippet was provided and reported to enable a successful deployment. The image/code is central to applying the fix.
Status: The original Remix route config error is resolved. The Prisma/OpenSSL runtime crash appears fixable via Dockerfile changes; at least one deploy succeeded after applying them. Overall, partially resolved and still actionable for environments like Fly.io.
getting error on deploying in heroku
remote: Step 9/10 : RUN npm run build
remote: —> Running in 6639f26b9b28
remote:
remote: > build
remote: > remix vite:build
remote:
remote: Route config in “routes.js” is invalid.
remote:
remote: Error: Failed to load url @remix-run/fs-routes (resolved id: @remix-run/fs-routes) in /app/app/routes.js. Does the file exist?
Im also having the same issue with Fly.io
did you manage to sort anything out with this?
Having Same Issue. Any solution please let me know.
You should move @remix-run/fs-routes from devDependencies to dependencies in the package.json. This should ensure it’s available in the production environment as required.
used this
{
“name”: “pilgrim-coupons”,
“private”: true,
“scripts”: {
“build”: “remix vite:build”,
“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”,
“engines”: {
“node”: “^18.20 || ^20.10 || >=21.0.0”
},
“dependencies”: {
“@prisma/client”: “^5.11.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-bridge-react”: “^4.1.2”,
“@shopify/polaris”: “^12.0.0”,
“@shopify/shopify-app-remix”: “^3.5.1”,
“@shopify/shopify-app-session-storage-prisma”: “^5.1.5”,
“isbot”: “^5.1.0”,
“prisma”: “^5.11.0”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“vite-tsconfig-paths”: “^5.0.1”,
“@remix-run/fs-routes”: “^2.15.0”
},
“devDependencies”: {
“@remix-run/eslint-config”: “^2.7.1”,
“@remix-run/route-config”: “^2.15.0”,
“@shopify/api-codegen-preset”: “^1.1.1”,
“@types/eslint”: “^8.40.0”,
“@types/node”: “^22.2.0”,
“@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”
],
“resolutions”: {},
“overrides”: {},
“author”: “deepak”
}
Thanks Alot it works.
It worked now, but seeing application error
prisma:warn Prisma failed to detect the libssl/openssl version to use, and may not work as expected. Defaulting to “openssl-1.1.x”.
2024-12-11T11:32:43.927538+00:00 app[web.1]: Please manually install OpenSSL and try installing Prisma again.
2024-12-11T11:32:44.159654+00:00 app[web.1]: prisma:warn Prisma failed to detect the libssl/openssl version to use, and may not work as expected. Defaulting to “openssl-1.1.x”.
2024-12-11T11:32:44.159659+00:00 app[web.1]: Please manually install OpenSSL and try installing Prisma again.
2024-12-11T11:32:44.161418+00:00 app[web.1]: Prisma schema loaded from prisma/schema.prisma
2024-12-11T11:32:44.168739+00:00 app[web.1]: Datasource “db”: SQLite database “dev.sqlite” at “file:dev.sqlite”
2024-12-11T11:32:44.183042+00:00 app[web.1]:
2024-12-11T11:32:44.183185+00:00 app[web.1]: Error: Could not parse schema engine response: SyntaxError: Unexpected token E in JSON at position 0
2024-12-11T11:32:44.212531+00:00 app[web.1]: npm notice
2024-12-11T11:32:44.212532+00:00 app[web.1]: npm notice New minor version of npm available! 10.8.2 → 10.9.2
2024-12-11T11:32:44.212533+00:00 app[web.1]: npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.2
2024-12-11T11:32:44.212533+00:00 app[web.1]: npm notice To update run: npm install -g [email removed]
2024-12-11T11:32:44.212534+00:00 app[web.1]: npm notice
2024-12-11T11:32:44.279012+00:00 heroku[web.1]: Process exited with status 1
2024-12-11T11:32:44.310612+00:00 heroku[web.1]: State changed from starting to crashed
2024-12-11T11:35:00.341058+00:00 heroku[router]: at=error code=H10 desc=“App crashed” method=GET path=“/” host=pilgrim-coupon-d52bfbe8a139.herokuapp.com request_id=7859718d-cca2-461b-b7fc-48c7d7dae293 fwd=“106.219.69.119” dyno= connect= service= status=503 bytes= protocol=https
2024-12-11T11:35:01.398254+00:00 heroku[router]: at=error code=H10 desc=“App crashed” method=GET path=“/favicon.ico” host=pilgrim-coupon-d52bfbe8a139.herokuapp.com request_id=1b4daedb-06dd-4bef-b657-3ffdc05749c7 fwd=“106.219.69.119” dyno= connect= service= status=503 bytes= protocol=https
Add the following code to your docker file to fix this.
This helped me deploy my application successfully.