Cannot use $app in library code

[ciscoheat]

Describe the bug

When importing a sveltekit library that contains a reference to $app, for example:

import { browser } from '$app/environment'

Fails the build for the project using the library.

The library in question is https://www.npmjs.com/package/sveltekit-flash-message

Reproduction

1. Create a new sveltekit todo project
2. npm i sveltekit-flash-message
3. Add to +layout.svelte:

<script>
  import { getFlashMessage } from 'sveltekit-flash-message/client'
</script>

When starting a dev server, the error output should be as in the logs.

A similar problem happens at https://stackblitz.com/edit/sveltejs-kit-template-default-sn2wxp?file=src%2Froutes%2F%2Blayout.svelte&terminal=dev

Logs

> vite dev

X [ERROR] Could not resolve "$app/stores"

    node_modules/.pnpm/[email protected]/node_modules/sveltekit-flash-message/client.js:4:21:
      4 │ import { page } from '$app/stores';
        ╵                      ~~~~~~~~~~~~~

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

X [ERROR] Could not resolve "$app/environment"

    node_modules/.pnpm/[email protected]/node_modules/sveltekit-flash-message/client.js:5:24:
      5 │ import { browser } from '$app/environment';
        ╵                         ~~~~~~~~~~~~~~~~~~

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

E:\Projects\TEST\svelte-next\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:1624
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 2 errors:
node_modules/.pnpm/[email protected]/node_modules/sveltekit-flash-message/client.js:4:21: ERROR: Could not resolve "$app/stores"
node_modules/.pnpm/[email protected]/node_modules/sveltekit-flash-message/client.js:5:24: ERROR: Could not resolve "$app/environment"
    at failureErrorWithLog (E:\Projects\TEST\svelte-next\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:1624:15)
    at E:\Projects\TEST\svelte-next\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:1266:28
    at runOnEndCallbacks (E:\Projects\TEST\svelte-next\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:1046:63)
    at buildResponseToResult (E:\Projects\TEST\svelte-next\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:1264:7)
    at E:\Projects\TEST\svelte-next\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:1377:14
    at E:\Projects\TEST\svelte-next\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:678:9
    at handleIncomingPacket (E:\Projects\TEST\svelte-next\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:775:9)
    at Socket.readFromStdout (E:\Projects\TEST\svelte-next\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:644:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:315:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 21,
        file: 'node_modules/.pnpm/[email protected]/node_modules/sveltekit-flash-message/client.js',
        length: 13,
        line: 4,
        lineText: "import { page } from '$app/stores';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "$app/stores" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "$app/stores"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 24,
        file: 'node_modules/.pnpm/[email protected]/node_modules/sveltekit-flash-message/client.js',
        length: 18,
        line: 5,
        lineText: "import { browser } from '$app/environment';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "$app/environment" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "$app/environment"'
    }
  ],
  warnings: []
}
 ELIFECYCLE  Command failed with exit code 1.

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 44.33 GB / 63.93 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.70)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.69
    @sveltejs/kit: 1.0.0-next.454 => 1.0.0-next.454
    svelte: ^3.49.0 => 3.49.0
    vite: ^3.1.0-beta.1 => 3.1.0-beta.1

Severity

blocking all usage of SvelteKit

Additional Information

The suggestion You can mark the path "$app/environment" as external to exclude it from the bundle, which will remove this error. doesn't say where to do that, and if it's not in the library code it's kind of useless.

[Conduitry]

I imagine this would fall under the same issue as #3010.

[ciscoheat]

Is there any other workaround than passing the relevant functions into the library? It's kind of much to ask library consumers to import every Sveltekit function that a library uses into their own code. That pretty much defeats the purpose of a library.

[madeleineostoja]

also a lot of crossover with #1485

[benmccann]

Closing as duplicate of #1485 / #5879