[adapter-vercel] Page visits return 500: INTERNAL_SERVER_ERROR possibly due to missing modules that are marked as external for esbuild

Describe the bug

When using a module that doesn't play well with esbuild, (eg: html-minifier), deploying to Vercel is technically successful but results in failing page visits.

In my case, I've used the html-minifier package to write a simple handle hook that minifies html.

The deploys were previously showing warnings that certain relative paths needed to be marked as external for esbuild.
All of these warnings had ties to uglify-js, a dependency of html-minifier.
These warnings disappeared when html-minifier was marked as external

Reproduction

Here is a link to a reproduction.

Here are the steps I took to create the reproduction:

Start with default skeleton with all extras enabled.
Install html-minifier and create a simple handle hook that minifies html.
At this point, I got the following warnings on Vercel:

Warnings on Vercel deployment log

▲ [WARNING] "../lib/utils.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:4:20:
      4 │     require.resolve("../lib/utils.js"),
        ╵                     ~~~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/ast.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:5:20:
      5 │     require.resolve("../lib/ast.js"),
        ╵                     ~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/transform.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:6:20:
      6 │     require.resolve("../lib/transform.js"),
        ╵                     ~~~~~~~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/parse.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:7:20:
      7 │     require.resolve("../lib/parse.js"),
        ╵                     ~~~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/scope.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:8:20:
      8 │     require.resolve("../lib/scope.js"),
        ╵                     ~~~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/compress.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:9:20:
      9 │     require.resolve("../lib/compress.js"),
        ╵                     ~~~~~~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/output.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:10:20:
      10 │     require.resolve("../lib/output.js"),
         ╵                     ~~~~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/sourcemap.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:11:20:
      11 │     require.resolve("../lib/sourcemap.js"),
         ╵                     ~~~~~~~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/mozilla-ast.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:12:20:
      12 │     require.resolve("../lib/mozilla-ast.js"),
         ╵                     ~~~~~~~~~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/propmangle.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:13:20:
      13 │     require.resolve("../lib/propmangle.js"),
         ╵                     ~~~~~~~~~~~~~~~~~~~~~~

▲ [WARNING] "../lib/minify.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:14:20:
      14 │     require.resolve("../lib/minify.js"),
         ╵                     ~~~~~~~~~~~~~~~~~~

▲ [WARNING] "./exports.js" should be marked as external for use with "require.resolve"

    node_modules/.pnpm/uglify-js@3.15.2/node_modules/uglify-js/tools/node.js:15:20:
      15 │     require.resolve("./exports.js"),
         ╵                     ~~~~~~~~~~~~~~

Install the adapter-vercel and specify html-minifier as an external module.

Logs

Here's an example log for functions that are invoked when a user visits the deployed site:

ERROR	Cannot find module 'html-minifier'
      Did you forget to add it to "dependencies" in `package.json`?
      Runtime exited with error: exit status 1

System Info

System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-4700HQ CPU @ 2.40GHz
    Memory: 2.90 GB / 15.52 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.18.1/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Brave Browser: 96.1.32.115
    Firefox: 95.0
  npmPackages:
    @sveltejs/adapter-vercel: next => 1.0.0-next.46 
    @sveltejs/kit: next => 1.0.0-next.294 
    svelte: ^3.46.4 => 3.46.4

Severity

blocking an upgrade

Additional Information

I'm using pnpm as my package manager
Some relevant issues and PRs: Overhaul adapter API #2931, Vercel externals #3614, Vercel Build Fails as Can't Set EsBuild Externals #3588, Cannot import packages on vercel deployment, works fine in dev #869, External imports can't build #3306

I think I might be missing some configuration.

Any help is appreciated!
Thank you for your time!

I've used the html-minifier package to write a simple handle hook that minifies html.

This seems unlikely to me to be a performance enhancement if you're doing it at runtime. I'd recommend doing it only during prerendering as demonstrated here: https://kit.svelte.dev/docs/migrating#integrations-html-minifier

@benmccann

Hey @benmccann

Thank you for sharing that snippet!

I've realized that minifying all HTML responses may not be ideal.
Like you suggested, I've set the hook to run only during pre-rendering like so:

import { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { minify } from 'html-minifier';

import { prerendering } from '$app/env';

const minifyHtml: Handle = async ({ event, resolve }) =>
  await resolve(event, {
    transformPage: ({ html }) =>
      prerendering
        ? minify(html, {
            collapseBooleanAttributes: true,
            collapseWhitespace: true,
            decodeEntities: true,
            minifyCSS: true,
            minifyJS: true,
            removeAttributeQuotes: true,
            removeComments: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            sortAttributes: true,
            sortClassName: true
          })
        : html
  });

export const handle = sequence(minifyHtml);

Now, prerendered pages are minified as expected and work flawlessly!

Unfortunately, the issue still exists, and pages that are not prerendered return 500: INTERNAL_SERVER_ERROR.

My guess is that packages that don't work well with vite / esbuild, like uglify-js (a dependency of html-minifier), are causing the issue.
In my case I had to add html-minifier to adapter-vercel's external to stop build errors.

Is there a way to bundle these dependencies for adapter-vercel?

Thank you again for your help with this issue!

Did you get anywhere with this? I have the same issue, an "external" dependency not found, using sveltekit/vercel/pnpm. In my case I'm external-ising svg2img which loads a .node file (unsupported by esbuild afaik). Also of possible importance - I'm getting this problem in an endpoint.

This will hopefully be fixed by #4969

Going to assume this was fixed by #4969 and close it — feel free to open a new issue if it's still happening with current versions of everything

I can confirm that this issue is resolved!
Thanks!

Navigation Menu

Repository navigation

[adapter-vercel] Page visits return `500: INTERNAL_SERVER_ERROR` possibly due to missing modules that are marked as `external` for `esbuild` #4247

Describe the bug

Reproduction

Logs

System Info

Severity

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[adapter-vercel] Page visits return 500: INTERNAL_SERVER_ERROR possibly due to missing modules that are marked as external for esbuild #4247

Description

Describe the bug

Reproduction

Logs

System Info

Severity

Additional Information

Activity

benmccann commented on Mar 16, 2022

kelvindecosta commented on Mar 20, 2022

homerjam commented on Apr 23, 2022

Rich-Harris commented on May 17, 2022

Rich-Harris commented on Jul 15, 2022

kelvindecosta commented on Jul 17, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[adapter-vercel] Page visits return `500: INTERNAL_SERVER_ERROR` possibly due to missing modules that are marked as `external` for `esbuild` #4247