CODEWITHSUNDEEP
sveltesveltekit
Diesel
Diesel

Reputation: 5355

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

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!

Upvotes: 2

Views: 4158

Answers (1)

Shriji Kondan Elangovan
Shriji Kondan Elangovan

Reputation: 1109

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;

Upvotes: 5

Related Questions