How to access $app from a package built with svelte-package?

[paoloricciuti]

Hi i'm currently writing a package for sveltekit and i need to access the page store and the goto function from the store that i'm exporting as the package.

Is there a way to do it? In local everything works fine but when i publish the package and try to use it on a project i get errors because it can't resolve "$app/stores" and "$app/navigation".

From the documentation i've seen that inside packages built with svelte-package

All relative file imports need to be fully specified, adhering to Node's ESM algorithm. This means you cannot import the file src/lib/something/index.js like import { something } from './something, instead you need to import it like this: import { something } from './something/index.js. If you are using TypeScript, you need to import .ts files the same way, but using a .js file ending, not a .ts file ending (this isn't under our control, the TypeScript team has made that decision). Setting "moduleResolution": "NodeNext" in your tsconfig.json or jsconfig.json will help you with this.

but even then i'm getting the same error. How to handle this? I could in theory let the user pass in those stores but that's something i would prefer avoid.

[paoloricciuti]

For anyone interested: I've asked rich on Twitter and no... it's not possible for the moment. But they are looking into it.

EDIT:

Upon a suggestion from twitter i found out that if you modify the vite config to add your package to optimizeDeps.exclude and ssr.noExternal it actually works. The way i ended up doing the thing it's export a vite plugin to modify the vite config so that the user can uise the package freely.

I'll leave the super simple plugin there if someone need it:

export function pluginName() {
    return {
        name: 'vite-plugin-your-package-name',
        config: () => ({
            optimizeDeps: {
                exclude: ['your-package-name']
            },
            ssr: {
                noExternal: ['your-package-name']
            }
        })
    };
}

just to be completed: do not export this from the index.ts file otherwise it will fail to import it from the vite.config.js...leave the file as is and sveltekit-package will add an export to the package json. You can than import it in vite.config.js like this

import { pluginName } from "your-package-name/filename";