Mark it as external to exclude it from the bundle

[alfrednerstu]

Hi, I'm getting this error message when I'm trying to build. How do I mark a package as external? Thanks!

> Build failed with 1 error:
.svelte-kit/output/server/app.js:20:29: error: Could not resolve "@supabase/supabase-js" 
(mark it as external to exclude it from the bundle)

[jpaquim]

Not sure in what part of the build process it's breaking, but if it's esbuild you may take a look at https://esbuild.github.io/api/#external for documentation on how to specify the package should be ignored. If it's vite, maybe check out https://vitejs.dev/guide/ssr.html#ssr-externals and https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md to see if there's any relevant config, and the vite: () => ({}) option in your svelte.config.js.

If you can provide a minimal repo where you can reproduce the issue, I can help with further debugging.

[willpuckett]

I'm getting the same error at https://github.com/willpuckett/cnit133/tree/deno:

> Using svelte-adapter-deno
 > .svelte-kit/output/server/chunks/2-640dc42d.js:4:7: error: Could not resolve "jquery" (mark it as external to exclude it from the bundle)
    4 │ import "jquery";
      ╵        ~~~~~~~~

 > .svelte-kit/output/server/chunks/success-d2321f5a.js:2:7: error: Could not resolve "canvas-confetti" (mark it as external to exclude it from the bundle)
    2 │ import "canvas-confetti";
      ╵        ~~~~~~~~~~~~~~~~~

 > .svelte-kit/output/server/chunks/2-3bda3732.js:3:68: error: Could not resolve "jquery" (mark it as external to exclude it from the bundle)
    3 │ ...                                          */import "jquery";
      ╵                                                       ~~~~~~~~

Thanks a bunch!

[jpaquim]

Ok, I think I understand your issue @willpuckett, and moving your library imports from the top-level into the onMount() lifecycle as dynamic imports should fix it, essentially the problem that is described here: https://kit.svelte.dev/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window.

I opened a PR in your repo with some suggested changes, also based on the discussion here https://github.com/jquery/jquery/issues/4592#issuecomment-939773349

[jpaquim]

@alfrednerstu any news on your issue? Would a solution similar to what I described above work for your situation?

From what I understand from https://github.com/supabase/supabase-js you should be able to use it browser-side, however you probably won't be able to make use of it server-side, given that it's a Node library and not Deno compatible. If you do need to use it server-side, I'd suggest trying Deno's Node-compatibility layer https://deno.land/std/node although it's a bit hit and miss whether it will work or not, given that compatibility is not yet 100% complete at this point.

[willpuckett]

Thanks that's exactly what I needed!

[jpaquim]

Closing this issue for now, feel free to reopen if it becomes a problem again in the future.

[aayush-vagrecha]

✘ [ERROR] Could not resolve "@supabase/supabase-js"

src/index.ts:1:45:
  1 │ import { createClient, SupabaseClient } from "@supabase/supabase-js";
    ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "@supabase/supabase-js" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Build failed with 1 error:

src/index.ts:1:45: ERROR: Could not resolve "@supabase/supabase-js"

[josuevalrob]

Dont know what to do...

✘ [ERROR] Could not resolve "@mui/base/utils"

    ../../.yarn/__virtual__/@mui-x-date-pickers-virtual-482c4ef232/0/cache/@mui-x-date-pickers-npm-6.1.0-67b7ecaaa4-4f41607d06.zip/node_modules/@mui/x-date-pickers/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js:11:29:
      11 │ import { useSlotProps } from '@mui/base/utils';
         ╵                              ~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@mui/base" here because it's not listed as a
  dependency of this package:

    ../../.pnp.cjs:3578:33:
      3578 │           "packageDependencies": [\
           ╵                                  ~~

  You can mark the path "@mui/base/utils" as external to exclude it from the bundle, which will
  remove this error.

[mohamed-badaoui]

Generally I defined custom paths in tsconfig.json file with the paths property. for example, when I need an external source path from node_modules for bootstrap-icons, I add this

...
"paths": {
  ...,
  "@bootstrap-icons/*": [
      "node_modules/bootstrap-icons/*"
   ]
  ...,
}
...

So I can use the path like this:

url("@bootstrap-icons/font/fonts/bootstrap-icons.woff2")

it's the same for the imports.

[ELHart05]

X [ERROR] Could not resolve "bowser"

    node_modules/@web3-onboard/core/dist/index-0ef6687b.js:3:19:
      3 │ import bowser from 'bowser';
        ╵                    ~~~~~~~~

  You can mark the path "bowser" as external to exclude it from the bundle, which will remove this
  error.

X [ERROR] Could not resolve "svelte-i18n"

    node_modules/@web3-onboard/core/dist/index-0ef6687b.js:4:91:
      4 │ import { locale as locale$1, _, addMessages, init as init$2, getLocaleFromNavigator } from 'svelte-i18n';
        ╵                                                                                            ~~~~~~~~~~~~~

  You can mark the path "svelte-i18n" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "joi"

    node_modules/@web3-onboard/core/dist/index-0ef6687b.js:6:16:
      6 │ import Joi from 'joi';
        ╵                 ~~~~~

  You can mark the path "joi" as external to exclude it from the bundle, which will remove this
  error.

X [ERROR] Could not resolve "@web3-onboard/common"

    node_modules/@web3-onboard/core/dist/index-0ef6687b.js:7:119:
      7 │ import { chainNamespaceValidation, chainIdValidation, chainValidation, validate, weiToEth, ProviderRpcErrorCode } from '@web3-onboard/common';
        ╵                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@web3-onboard/common" as external to exclude it from the bundle, which will
  remove this error.

X [ERROR] Could not resolve "bignumber.js"

    node_modules/@web3-onboard/core/dist/index-0ef6687b.js:8:22:
      8 │ import BigNumber from 'bignumber.js';
        ╵                       ~~~~~~~~~~~~~~

  You can mark the path "bignumber.js" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "svelte/store"

    node_modules/@web3-onboard/core/dist/index-0ef6687b.js:9:29:
      9 │ import { get as get$1 } from 'svelte/store';
        ╵                              ~~~~~~~~~~~~~~

  You can mark the path "svelte/store" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "lodash.partition"

    node_modules/@web3-onboard/core/dist/index-0ef6687b.js:10:22:
      10 │ import partition from 'lodash.partition';
         ╵                       ~~~~~~~~~~~~~~~~~~

  You can mark the path "lodash.partition" as external to exclude it from the bundle, which will
  remove this error.

X [ERROR] Could not resolve "bnc-sdk"

    node_modules/@web3-onboard/core/dist/index-0ef6687b.js:3140:54:
      3140 │         const { default: Blocknative } = await import('bnc-sdk');
           ╵                                                       ~~~~~~~~~

  You can mark the path "bnc-sdk" as external to exclude it from the bundle, which will remove this
  error. You can also add ".catch()" here to handle this failure at run-time instead of bundle-time.

X [ERROR] Could not resolve "@web3-onboard/common"

    node_modules/@web3-onboard/core/dist/index-0ef6687b.js:10857:38:
      10857 │     const { InterVar } = await import('@web3-onboard/common');
            ╵                                       ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@web3-onboard/common" as external to exclude it from the bundle, which will
  remove this error. You can also add ".catch()" here to handle this failure at run-time instead of
  bundle-time.

X [ERROR] Could not resolve "svelte-i18n"

    node_modules/@web3-onboard/core/dist/Index-cbb31d55.js:2:26:
      2 │ import { _, locale } from 'svelte-i18n';
        ╵                           ~~~~~~~~~~~~~

  You can mark the path "svelte-i18n" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "svelte-i18n"

    node_modules/@web3-onboard/core/dist/Index-26bc36ba.js:3:18:
      3 │ import { _ } from 'svelte-i18n';
        ╵                   ~~~~~~~~~~~~~

  You can mark the path "svelte-i18n" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "@web3-onboard/common"

    node_modules/@web3-onboard/core/dist/Index-26bc36ba.js:4:7:
      4 │ import '@web3-onboard/common';
        ╵        ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@web3-onboard/common" as external to exclude it from the bundle, which will
  remove this error.

X [ERROR] Could not resolve "bowser"

    node_modules/@web3-onboard/core/dist/Index-cbb31d55.js:6:7:
      6 │ import 'bowser';
        ╵        ~~~~~~~~

  You can mark the path "bowser" as external to exclude it from the bundle, which will remove this
  error.

X [ERROR] Could not resolve "lodash.partition"

    node_modules/@web3-onboard/core/dist/Index-26bc36ba.js:6:7:
      6 │ import 'lodash.partition';
        ╵        ~~~~~~~~~~~~~~~~~~

  You can mark the path "lodash.partition" as external to exclude it from the bundle, which will
  remove this error.

X [ERROR] Could not resolve "joi"

    node_modules/@web3-onboard/core/dist/Index-cbb31d55.js:8:7:
      8 │ import 'joi';
        ╵        ~~~~~

  You can mark the path "joi" as external to exclude it from the bundle, which will remove this
  error.

X [ERROR] Could not resolve "bignumber.js"

    node_modules/@web3-onboard/core/dist/Index-26bc36ba.js:8:7:
      8 │ import 'bignumber.js';
        ╵        ~~~~~~~~~~~~~~

  You can mark the path "bignumber.js" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "@web3-onboard/common"

    node_modules/@web3-onboard/core/dist/Index-cbb31d55.js:9:7:
      9 │ import '@web3-onboard/common';
        ╵        ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@web3-onboard/common" as external to exclude it from the bundle, which will
  remove this error.

X [ERROR] Could not resolve "svelte/store"

    node_modules/@web3-onboard/core/dist/Index-26bc36ba.js:9:7:
      9 │ import 'svelte/store';
        ╵        ~~~~~~~~~~~~~~

  You can mark the path "svelte/store" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "bignumber.js"

    node_modules/@web3-onboard/core/dist/Index-cbb31d55.js:10:7:
      10 │ import 'bignumber.js';
         ╵        ~~~~~~~~~~~~~~

  You can mark the path "bignumber.js" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "bowser"

    node_modules/@web3-onboard/core/dist/Index-26bc36ba.js:10:7:
      10 │ import 'bowser';
         ╵        ~~~~~~~~

  You can mark the path "bowser" as external to exclude it from the bundle, which will remove this
  error.

X [ERROR] Could not resolve "svelte/store"

    node_modules/@web3-onboard/core/dist/Index-cbb31d55.js:11:7:
      11 │ import 'svelte/store';
         ╵        ~~~~~~~~~~~~~~

  You can mark the path "svelte/store" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "joi"

    node_modules/@web3-onboard/core/dist/Index-26bc36ba.js:12:7:
      12 │ import 'joi';
         ╵        ~~~~~

  You can mark the path "joi" as external to exclude it from the bundle, which will remove this
  error.

X [ERROR] Could not resolve "lodash.partition"

    node_modules/@web3-onboard/core/dist/Index-cbb31d55.js:12:7:
      12 │ import 'lodash.partition';

### same issue here???? :/