SvelteKit $app cannot be found in svelte.config.js

Question

I installed a fresh SvelteKit per the documentation and receive this error if I attempt to use $app in the svelte config.

Error in svelte.config.js

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '$app' imported from /Users/username/projects/my-app/svelte.config.js

The code looks like -

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';
import { dev } from '$app/env';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        adapter: adapter(),
        paths: {
            base: dev ? '' : '/CapitalBikesProject'
        },

        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte'
    }
};

export default config;

How do I access dev mode inside the config javascript file? Thank you!

Shriji Kondan Elangovan · Accepted Answer · 2022-07-22 07:00:01Z

Great question. The solution is this, you cannot use the $app inside the config file if you would ever need the environment you need, you can use process.env.NODE_ENV which returns strings production and development

UPDATE

With Sveltekit PR merged with 5602 and mentioned in changelog 100-next384

If you still would like to use this trick on the svelte.config.js then consider updating your dev script from "dev": "vite dev", to "dev": "NODE_ENV=development vite dev",.

Change your svelte.config.js to this.

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        adapter: adapter(),
        paths: {
            base: process.env.NODE_ENV === 'development' ? '' : '/CapitalBikesProject'
        },

        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte'
    }
};

export default config;

Collectives™ on Stack Overflow

SvelteKit $app cannot be found in svelte.config.js

1 Answer 1

UPDATE

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

Comments

Your Answer

Sign up or log in

Post as a guest

Related