Koa + Next.js + Shopify App: "write ECONNRESET" Error When Loading App

I'm developing a Shopify app using Koa and Next.js. While trying to load the app, I'm encountering a write ECONNRESET error, and the app URL displays a blank page. Below are the details of my setup and the error message I'm receiving. Setup: Development Environment: OS: Windows 10 Node.js Version: v20.10.0 Koa Version: 2.x Next.js Version: 14.2.4 Dependencies: koa koa-session koa-static next @shopify/koa-shopify-auth Server Code (server.js): require('isomorphic-fetch'); const dotenv = require('dotenv'); const Koa = require('koa'); const next = require('next'); const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth'); const { verifyRequest } = require('@shopify/koa-shopify-auth'); const session = require('koa-session'); const serve = require('koa-static'); const path = require('path'); dotenv.config(); const port = parseInt(process.env.PORT, 10) || 3000; const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev }); const handle = app.getRequestHandler(); const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env; app.prepare().then(() => { const server = new Koa(); server.use(session({ secure: true, sameSite: 'none' }, server)); server.keys = [SHOPIFY_API_SECRET_KEY]; server.use( createShopifyAuth({ apiKey: SHOPIFY_API_KEY, secret: SHOPIFY_API_SECRET_KEY, scopes: ['read_products'], async afterAuth(ctx) { const { shop, accessToken } = ctx.session; ctx.redirect('/'); } }) ); server.use(verifyRequest()); // Serve static files server.use(serve(path.join(__dirname, '.next/static'))); // Global error handling server.on('error', (err, ctx) => { console.error('server error', err, ctx); }); server.use(async (ctx) => { try { await handle(ctx.req, ctx.res); ctx.respond = false; ctx.res.statusCode = 200; } catch (err) { console.error('Error handling request', err); ctx.throw(500, 'Internal Server Error'); } }); server.listen(port, () => { console.log(`> Ready on http://localhost:${port}`); }); }); Error Details: Upon running npm run dev, the server starts without any issues. However, when I try to load the app via the ngrok URL in the Shopify admin, I encounter the following error: server error Error: write ECONNRESET at afterWriteDispatched (node:internal/stream_base_commons:160:15) at writevGeneric (node:internal/stream_base_commons:143:3) at Socket._writeGeneric (node:net:950:11) at Socket._writev (node:net:959:8) at doWrite (node:internal/streams/writable:580:12) at clearBuffer (node:internal/streams/writable:757:5) at Writable.uncork (node:internal/streams/writable:515:7) at connectionCorkNT (node:_http_outgoing:955:8) at process.processTicksAndRejections (node:internal/process/task_queues:81:21) { errno: -4077, code: 'ECONNRESET', syscall: 'write', headerSent: true } { request: { method: 'GET', url: '/_next/static/chunks/main.js', header: { host: 'deb8-2409-40f2-159-a2a6-d09b-7be2-265-7864.ngrok-free.app', 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36', accept: '*/*', 'accept-encoding': 'gzip, deflate, br, zstd', 'accept-language': 'en-US,en;q=0.9', cookie: 'abuse_interstitial=deb8-2409-40f2-159-a2a6-d09b-7be2-265-7864.ngrok-free.app; shopifyNonce=172026866166100; shopifyNonce.sig=wwZZvEZ8GUhQS56d9DrbWWBe3S8; koa.sess=eyJzaG9wIjoiYXBwLXBsYXktZ3JvdW5kLm15c2hvcGlmeS5jb20iLCJhY2Nlc3NUb2tlbiI6InNocHVhX2QzZGVjMjE4YTg2Yzk2MGJhMzJkODA5ZWY2MTQ4NTZjIiwiX2V4cGlyZSI6MTcyMDM1NTA2MzYyMywiX21heEFnZSI6ODY0MDAwMDB9; koa.sess.sig=fr_scIE6zSRsjwhDZFHrET1qRMs', dnt: '1', referer: 'https://deb8-2409-40f2-159-a2a6-d09b-7be2-265-7864.ngrok-free.app/?hmac=6ae6332ddda17fdac560fb17485001457ccf25f7ce04795b922f40e80f74a01f&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvYXBwLXBsYXktZ3JvdW5k&shop=app-play-ground.myshopify.com&timestamp=1720269284', 'sec-ch-ua': '"Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"', 'sec-ch-ua-mobile': '?0', 'sec-ch-ua-platform': '"Windows"', 'sec-fetch-dest': 'script', 'sec-fetch-mode': 'no-cors', 'sec-fetch-site': 'same-origin', 'x-forwarded-for': '152.58.208.209', 'x-forwarded-host': 'deb8-2409-40f2-159-a2a6-d09b-7be2-265-7864.ngrok-free.app', 'x-forwarded-proto': 'https' } }, response: { status: 404, message: 'Not Found', header: [Object: null prototype] { 'set-cookie': [Array], 'cache-control': 'no-store, must-revalidate', 'accept-ranges': 'bytes', 'last-modified': 'Sat, 06 Jul 2024 12:34:46 GMT', etag: 'W/"4c6cfe-190880a2bc8"', 'content-type': 'application/javascript; charset=UTF-8', vary: 'Accept-Encoding', 'content-encoding': 'gzip' } }, app: { subdomainOffset: 2, proxy: false, env: 'development' }, originalUrl: '/_next/static/chunks/main.js', req: '<original node req>', res: '<original node res>', socket: '<original node socket>' } What I've Tried: Verified that the static file exists and is correctly served. Ensured all necessary dependencies are installed. Checked network stability and firewall settings. Implemented global error handling to catch and log server errors. Environment Variables: SHOPIFY_API_KEY: [REDACTED] SHOPIFY_API_SECRET_KEY: [REDACTED] Additional Context: The error occurs consistently when trying to load the app from the Shopify admin. The server logs indicate that the request for /_next/static/chunks/main.js returns a 404 status before the ECONNRESET error. Any insights or suggestions to resolve this issue would be greatly appreciated. Thank you!

Comment (0)

You’ll be in good company