sveltejs/kit

Run time error from `$app` import inside `node_modules` component

Closed this issue · 4 comments

Describe the bug

Is it possible to import $app from components inside node_modules?

Seems to work in most cases but just found an error trying to import

<script>
  import { afterNavigate } from '$app/navigation'
</script>

Not sure if this is really a bug or expected behavior?

Reproduction

npm init svelte@next test-after-nav-import # no to all questions
cd test-after-nav-import
npm i
mkdir node_modules/pkg
echo '{ "name": "pkg", "exports": { "./file.svelte": "./file.svelte" } }' >> node_modules/pkg/package.json
echo '<script> import { afterNavigate } from "$app/navigation"; </script>' >> node_modules/pkg/file.svelte
echo '<script> import File from "pkg/file.svelte"; </script> <File />' >> src/routes/index.svelte
npm run build
npm run preview

Open the site and I get

Uncaught TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling') at vendor-15d5f540.js:1:7117

System Info

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 340.23 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.5.1 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 99.1.36.117
    Safari: 15.3

Severity

serious, but I can work around it

Sounds like a duplicate of #1485 . It's an open issue that using $app/.. imports inside component libraries is a problem (and for testing, too).

@dummdidumm Ah thanks for the pointer. Yes, that's a dupe. Though the title on the other issue makes it a bit hard to find imo. Plus no pasteable repro.

I've retitled #1485, so I'll close this — thanks

@Rich-Harris, we hit this bug without importing $app from an external module, just by having custom chunking enabled.