Deployment is returning 502: BAD_GATEWAY error

[Isaac-Tait]

I am trying to sort out what is causing the error. Here is the error from the Build Logs:

12:52:57.034 | ┌──────────────────────────────┐
-- | --
12:52:57.035 | │ built server with 2 warnings │
12:52:57.035 | └──────────────────────────────┘
12:52:57.035 | > 'images/successkid.jpg' is imported by src/routes/index.svelte, but could not be resolved – treating it as an external dependency
12:52:57.035 | > Entry module "src/server.ts" is implicitly using "default" export mode, which means for CommonJS output that its default export is assigned to "module.exports". For many tools, such CommonJS output will not be interchangeable with the original ES module. If this is intended, explicitly set "output.exports" to either "auto" or "default", otherwise you might want to consider changing the signature of "src/server.ts" to use named exports only.

I am thinking the 2nd error could be the main problem with the deploy. Here is what my server.ts file shows:

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

export default polka() // You can also use Express
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

However, when I run vercel in the CLI I get this error:

Due to `builds` existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply.

I assume that the mentioned "configuration file" is vercel.json. Mine looks like this:

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "vercel-sapper"
    }
  ]
}

Does anyone have guidance on how to fix the 502: BAD_GATEWAY error I am experiencing? Thank you in advance for any assistance.

[Isaac-Tait]

I updated my server.ts file as specified in the error and the vercel-sapper documentation:

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

const App = polka() // You can also use Express
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

    export default App

in an effort to eliminate the 2nd error:

12:52:57.035 | > Entry module "src/server.ts" is implicitly using "default" export mode, which means for CommonJS output that its default export is assigned to "module.exports". For many tools, such CommonJS output will not be interchangeable with the original ES module. If this is intended, explicitly set "output.exports" to either "auto" or "default", otherwise you might want to consider changing the signature of "src/server.ts" to use named exports only.

However, the 502 Bad Gateway issue is still persisting. I will reach out to Vercel as well and see what they have to say.

[Isaac-Tait]

I did not end up needing to reach out to Vercel. After taking a better look at my Function Logs I noticed that the image folder where successkid.jpg is stored was throwing repeated errors (at one point 11 errors). I did find it odd that the image folder was stored in node_modules...Should it really be there? For some reason it could never resolve the image module. Here is the error:

[GET] /
19:47:41:87
2020-10-19T02:47:42.081Z    undefined   ERROR   Server is not listening Error: Cannot find module 'images/successkid.jpg'Require stack:- /var/task/__sapper__/build/server/server.js- /var/task/launcher.js- /var/runtime/UserFunction.js- /var/runtime/index.js    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)    at Function.Module._load (internal/modules/cjs/loader.js:841:27)    at Module.require (internal/modules/cjs/loader.js:1025:19)    at require (internal/modules/cjs/helpers.js:72:18)    at Object.<anonymous> (/var/task/__sapper__/build/server/server.js:8:18)    at Module._compile (internal/modules/cjs/loader.js:1137:30)    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)    at Module.load (internal/modules/cjs/loader.js:985:32)    at Function.Module._load (internal/modules/cjs/loader.js:878:14)    at Module.require (internal/modules/cjs/loader.js:1025:19) {  code: 'MODULE_NOT_FOUND',  requireStack: [    '/var/task/__sapper__/build/server/server.js',    '/var/task/launcher.js',    '/var/runtime/UserFunction.js',    '/var/runtime/index.js'  ]}RequestId: f9708333-685f-4392-9de1-ae546c3fa7d6 Error: Runtime exited with error: exit status 1Runtime.ExitError

I ended up deleting the image and all related code from the index.svelte file and presto no more 502 Bad Gateway error index.svelte file

<script>

</script>

<style>
    h1, figure, p {
        text-align: center;
        margin: 0 auto;
    }

    h1 {
        font-size: 2.8em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 0.5em 0;
    }

    figure {
        margin: 0 0 1em 0;
    }

    img {
        width: 100%;
        max-width: 400px;
        margin: 0 0 1em 0;
    }

    p {
        margin: 1em auto;
    }

    @media (min-width: 480px) {
        h1 {
            font-size: 4em;
        }
    }
</style>

<svelte:head>
    <title>Sapper project template</title>
</svelte:head>

<h1>Great success!</h1>

<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>

[thgh]

I tend to not import images but instead reference them by URL. It seems that your initial code was trying to import an image from a package "images". Did you mean "./images"? Are you using an alias plugin?

[Isaac-Tait]

I agree @thgh, I too prefer to import images via URL. The initial code (from the boilerplate import from the Svelte homepage)

npx degit sveltejs/template my-svelte-project

was trying to import from a package "images", which was "./images". I do not think I was using an alias plugin. Again I was just using this plugin "vercel-sapper" and the boilerplate code from the Svelte.dev site.

Thank you for your response I really appreciate it. Let me know if I can provide any further information.

[kytta]

See https://github.com/sveltejs/sapper-template/blob/b650d10b541849d708dcf3eaa5d685ec22cf861b/README.md#srcnode_modulesimages

They use this technique to dynamically generate hashed filenames for better CDN caching productivity. It would be actually quite nice to have that on some projects. Quite a bummer that it doesn't work now.

Edit: I only just noticed that @thgh was the one who added that paragraph in 😅 my apologies

[thgh]

I think the .vercelignore blocks the upload of src/node_modules

This change could fix it:

-node_modules
+/node_modules

[kostiato]

-node_modules
+/node_modules

unfortunately this didn't help.

[ar363]

i had the same issue yesterday and i solved it by changing my vercel.json like this

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "vercel-sapper",
      "config": {
-        "build": false
+        "build": true
      }
    }
  ]
}

that solved it for me

this may also work for you

[ghost]

Same here https://github.com/ulwlu/blog

ar363's solution and thgh's solution are not working for me.

[ar363]

@ulwlu the problem with your blog was that you hadn't included the posts directory in your vercel.json which was necessary to build your blog

this will fix it

  "builds": [
    {
      "src": "package.json",
-     "use": "vercel-sapper"
+     "use": "vercel-sapper",
+     "config": {
+         "include": ["posts"]
+      }
    }
  ]
}

if you have any directories that is not included in sapper by default, you have to add it in first. otherwise this again causes 502 errors.

Although there can be many causes for the 502: BAD GATEWAY error, Vercel usually always gives a proper cause in the Function logs if you are facing any issues

[ghost]

@ar363 Ohhh Thank you so much!! I had received your PR and it worked perfectly! Sorry for not knowing this, and I thank this great OSS again.

[thgh]

For anyone that wants to use the nested node_modules folder, add this in your .vercelignore:

!node_modules
/node_modules/*