1

I'm working on a SvelteKit project and encountering two main issues:

  1. Implicit "any" TypeScript Error:
    Even though I'm using JavaScript in my project, I'm seeing a TypeScript error Parameter '' implicitly has an 'any' type.ts(7006) in my code. It seems like TypeScript is checking for types in my JavaScript files, even though I haven't explicitly used TypeScript in my project.

  2. Unrecognized Global SCSS Variables:
    I'm importing global SCSS variables using sveltePreprocess in my svelte.config.js file. However, when I try to use these variables in my .svelte files, I receive an error saying Error: Undefined variable. Despite this error, the code runs and functions correctly, but I'm concerned about why these variables are not being recognized during the build process.

Here’s my svelte.config.js:

import adapter from '@sveltejs/adapter-auto';
import { sveltePreprocess } from 'svelte-preprocess';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        vitePreprocess(),
        sveltePreprocess({
            typescript: {
                compilerOptions: {
                    noImplicitAny: false
                }
            },
            scss: {
                prependData: `
                    @import 'src/assets/scss/global.scss';
                    @import 'src/assets/scss/variables.scss';
                `
            }
        })
    ],

    kit: {
        adapter: adapter()
    }
};

export default config;
  • For the TypeScript Issue:
    I attempted to suppress the implicit any errors by setting noImplicitAny: false in the TypeScript configuration within sveltePreprocess. However, the error still appears in my JavaScript files (and also <script> in .svelte files). I expected this configuration to prevent TypeScript from checking types in these files, but it doesn't seem to be working as intended.

  • For the SCSS Variables Issue:
    I expected that by using prependData to import my global SCSS files (global.scss and variables.scss), the variables defined within them would be globally available in all my .svelte files. However, when I reference these variables, I get an Undefined variable error, even though the code still compiles and runs correctly. I'm not sure if the issue is related to how the SCSS is being processed or if there's something else I'm missing in the configuration.

Any guidance or solutions to these issues would be greatly appreciated!

Edit: As requested, here is my tsconfig.json:

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler"
    }
    // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
    // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
    //
    // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
    // from the referenced tsconfig.json - TypeScript does not merge them in
}
4
  • The Svelte config is mostly irrelevant, show the tsconfig.json/jsconfig.json. Commented Aug 11, 2024 at 5:45
  • @brunnerh I have included my tsconfig.json file Commented Aug 11, 2024 at 17:45
  • That is SvelteKit's autogenerated config, do you not have a custom one in the root directory? Commented Aug 11, 2024 at 22:57
  • @brunnerh Sorry, I included the wrong file. I've corrected it now. Commented Aug 11, 2024 at 23:57

1 Answer 1

0

Turn off checkJs in the tsconfig, if you don't want TS errors in JS files or adjust individual settings (e.g. strict adds a lot of checks).

Don't know if there is a way of making the language server aware of global SCSS variables - there is no separate config and you cannot declare variables like you can with TS in a .d.ts file.

Sign up to request clarification or add additional context in comments.

1 Comment

Disabling checkJs worked perfectly. Thank you so much!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.