False "Missing Property" Highlighting on some URLSearchParams methods

[anito]

Describe the bug

Using URLSearchParams in a .svelte file brings up a diagnostic message: "missing property" and therefore courses the highlighting of the following methods:

• keys
• values
• entries

Whereas all the other methods (append, delete, get, getAll, has, set, sort, toString, forEach) seem to be supported by the repo just fine.

Reproduction

<script lang="ts">
  new URLSearchParams(...).keys();
  new URLSearchParams(...).values();
  new URLSearchParams(...).entries();

</script>

Expected behaviour

Since the above mentioned Class methods are well supported in modern browsers, they should not cause a diagnostic message in .svelte files saying "missing property".

System Info

• OS: [e.g. Windows]
• IDE: [e.g. VSCode, Atom]

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

[jasonlyu123]

This is most likely because your tsconfig lib doesn't include "DOM.Iterable". Can you check if you have the lib config?

[anito]

I'm not sure, my tsconfig.json says it

{
  "extends": "./.svelte-kit/tsconfig.json",
  ...

which includes the required libs out of the box. Here's my ./.svelte-kit/tsconfig.json:

"lib": [
  "esnext",
  "DOM",
  "DOM.Iterable"
]

I thought that should be doing it, but in my case the compiler messages persist. So obviously this isn't the right place to tell to use the lib? Where should it go then?

[jasonlyu123]

Can you provide your tsconfig.json? And can you also try running npx tsc --showConfig to see if the config resolved by typescript includes the lib?

[anito]

Thx, here is my tsc config:

{
    "compilerOptions": {
        "paths": {
            "assets": [
                "../src/assets"
            ],
            "assets/*": [
                "../src/assets/*"
            ],
            "$lib": [
                "../src/lib"
            ],
            "$lib/*": [
                "../src/lib/*"
            ]
        },
        "rootDirs": [
            "/Library/Server/Web/Data/Sites/vod-app-svelte-kit",
            "/Library/Server/Web/Data/Sites/vod-app-svelte-kit/.svelte-kit/types"
        ],
        "verbatimModuleSyntax": true,
        "isolatedModules": true,
        "lib": [
            "esnext",
            "dom",
            "dom.iterable"
        ],
        "moduleResolution": "bundler",
        "module": "esnext",
        "noEmit": true,
        "target": "esnext",
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true
    },
    "files": [
        "./.svelte-kit/ambient.d.ts",
        "./.svelte-kit/non-ambient.d.ts",
        "./.svelte-kit/types/src/routes/$types.d.ts",
        "./.svelte-kit/types/src/routes/(main)/$types.d.ts",
        "./.svelte-kit/types/src/routes/(main)/images/$types.d.ts",
        "./.svelte-kit/types/src/routes/(main)/images/[slug]/$types.d.ts",
        "./.svelte-kit/types/src/routes/(main)/users/$types.d.ts",
        "./.svelte-kit/types/src/routes/(main)/users/[slug]/$types.d.ts",
        "./.svelte-kit/types/src/routes/(main)/videos/$types.d.ts",
        "./.svelte-kit/types/src/routes/(main)/videos/[slug]/$types.d.ts",
        "./.svelte-kit/types/src/routes/(tests)/readable-stream/$types.d.ts",
        "./.svelte-kit/types/src/routes/about/$types.d.ts",
        "./.svelte-kit/types/src/routes/auth/$types.d.ts",
        "./.svelte-kit/types/src/routes/auth/login/$types.d.ts",
        "./.svelte-kit/types/src/routes/auth/logout/$types.d.ts",
        "./.svelte-kit/types/src/routes/config/$types.d.ts",
        "./.svelte-kit/types/src/routes/login/$types.d.ts",
        "./.svelte-kit/types/src/routes/logout/$types.d.ts",
        "./.svelte-kit/types/src/routes/privacy-policy/$types.d.ts",
        "./.svelte-kit/types/src/routes/repos/images/$types.d.ts",
        "./.svelte-kit/types/src/routes/repos/users/$types.d.ts",
        "./.svelte-kit/types/src/routes/repos/videos/$types.d.ts",
        "./.svelte-kit/types/src/routes/repos/videos/all/$types.d.ts",
        "./.svelte-kit/types/src/routes/session/$types.d.ts",
        "./svelte.config.js",
        "./vite.config.ts",
        "./src/lib/classes/index.js",
        "./src/lib/components/CopyShader.js",
        "./src/lib/components/index.js",
        "./src/lib/components/DateRangePicker/index.js",
        "./src/lib/components/DateRangePicker/utils/index.js",
        "./src/lib/components/TextEditable/index.js",
        "./src/lib/components/Video/index.js",
        "./src/lib/components/Video/mute.js",
        "./src/lib/stores/index.js",
        "./src/lib/utils/index.js",
        "./src/app.d.ts",
        "./src/hooks.client.ts",
        "./src/hooks.server.ts",
        "./src/service-worker.ts",
        "./src/lib/api.ts",
        "./src/lib/svg_manifest.ts",
        "./src/lib/types.d.ts",
        "./src/lib/vitals.ts",
        "./src/lib/classes/repos/images.ts",
        "./src/lib/classes/repos/repo.ts",
        "./src/lib/classes/repos/types.d.ts",
        "./src/lib/classes/repos/users.ts",
        "./src/lib/classes/repos/videos.ts",
        "./src/lib/classes/repos/videosAll.ts",
        "./src/lib/components/DateRangePicker/types.d.ts",
        "./src/lib/components/DateRangePicker/stores/localeStore.ts",
        "./src/lib/components/DateRangePicker/utils/build-month-dropdown.ts",
        "./src/lib/components/DateRangePicker/utils/build-year-dropdown.ts",
        "./src/lib/components/DateRangePicker/utils/day-offset.ts",
        "./src/lib/components/DateRangePicker/utils/get-calendar-weeks.ts",
        "./src/lib/components/DateRangePicker/utils/get-day-meta-data.ts",
        "./src/lib/components/DateRangePicker/utils/get-days-of-week.ts",
        "./src/lib/components/DateRangePicker/utils/get-touch-target.ts",
        "./src/lib/components/DateRangePicker/utils/is-disabled.ts",
        "./src/lib/components/DateRangePicker/utils/is-end-date.ts",
        "./src/lib/components/DateRangePicker/utils/is-next-month.ts",
        "./src/lib/components/DateRangePicker/utils/is-prev-month.ts",
        "./src/lib/components/DateRangePicker/utils/is-start-date.ts",
        "./src/lib/components/DateRangePicker/utils/locale-format.ts",
        "./src/lib/components/DateRangePicker/utils/pad.ts",
        "./src/lib/components/DateRangePicker/utils/passive-supported.ts",
        "./src/lib/components/DateRangePicker/utils/round-down.ts",
        "./src/lib/components/DateRangePicker/utils/to-range.ts",
        "./src/lib/components/Dropzone/type.d.ts",
        "./src/lib/components/LoadingSpinners/index.ts",
        "./src/lib/components/LoadingSpinners/spinner.type.d.ts",
        "./src/lib/components/LoadingSpinners/utils.d.ts",
        "./src/lib/components/LoadingSpinners/types/spinner.type.d.ts",
        "./src/lib/components/Video/utils.ts",
        "./src/lib/stores/avatarStore.ts",
        "./src/lib/stores/configStore.ts",
        "./src/lib/stores/currentImageStore.ts",
        "./src/lib/stores/currentMediaStore.ts",
        "./src/lib/stores/currentVideoStore.ts",
        "./src/lib/stores/derivedCurrentVideoStore.ts",
        "./src/lib/stores/fabStore.ts",
        "./src/lib/stores/flashStore.ts",
        "./src/lib/stores/frameworkStore.ts",
        "./src/lib/stores/googleUser.ts",
        "./src/lib/stores/imageStore.ts",
        "./src/lib/stores/inboxStore.ts",
        "./src/lib/stores/infoStore.ts",
        "./src/lib/stores/selectionStore.ts",
        "./src/lib/stores/sentStore.ts",
        "./src/lib/stores/sessionStore.ts",
        "./src/lib/stores/streamStore.ts",
        "./src/lib/stores/templateStore.ts",
        "./src/lib/stores/themeStore.ts",
        "./src/lib/stores/tickerStore.ts",
        "./src/lib/stores/urlStore.ts",
        "./src/lib/stores/userFoundationStore.ts",
        "./src/lib/stores/userStore.ts",
        "./src/lib/stores/videoAllStore.ts",
        "./src/lib/stores/videoStore.ts",
        "./src/lib/utils/auxSession.ts",
        "./src/lib/utils/const.ts",
        "./src/lib/utils/helper.ts",
        "./src/lib/utils/http.ts",
        "./src/lib/utils/locale-format.ts",
        "./src/lib/utils/media.ts",
        "./src/lib/utils/module-vars.ts",
        "./src/lib/utils/navigation.ts",
        "./src/lib/utils/reader.ts",
        "./src/lib/utils/slug.ts",
        "./src/lib/utils/time-functions.ts",
        "./src/lib/utils/video.ts",
        "./src/routes/+layout.server.ts",
        "./src/routes/+layout.ts",
        "./src/routes/+page.server.ts",
        "./src/routes/(main)/+layout.server.ts",
        "./src/routes/(main)/+layout.ts",
        "./src/routes/(main)/images/+layout.server.ts",
        "./src/routes/(main)/images/[slug]/+server.ts",
        "./src/routes/(main)/users/+page.server.ts",
        "./src/routes/(main)/users/+page.ts",
        "./src/routes/(main)/users/+server.ts",
        "./src/routes/(main)/users/[slug]/+page.server.ts",
        "./src/routes/(main)/users/[slug]/+page.ts",
        "./src/routes/(main)/users/[slug]/+server.ts",
        "./src/routes/(main)/videos/+page.server.ts",
        "./src/routes/(main)/videos/[slug]/+page.server.ts",
        "./src/routes/(main)/videos/[slug]/+page.ts",
        "./src/routes/(main)/videos/[slug]/+server.ts",
        "./src/routes/auth/+page.server.ts",
        "./src/routes/auth/login/+server.ts",
        "./src/routes/auth/logout/+server.ts",
        "./src/routes/config/+page.server.ts",
        "./src/routes/login/+page.server.ts",
        "./src/routes/login/+page.ts",
        "./src/routes/logout/+page.ts",
        "./src/routes/repos/images/+server.ts",
        "./src/routes/repos/users/+server.ts",
        "./src/routes/repos/videos/+server.ts",
        "./src/routes/repos/videos/all/+server.ts",
        "./src/routes/session/+server.ts"
    ],
    "include": [
        ".svelte-kit/ambient.d.ts",
        ".svelte-kit/non-ambient.d.ts",
        ".svelte-kit/./types/**/$types.d.ts",
        ".svelte-kit/../svelte.config.js",
        ".svelte-kit/../vite.config.js",
        ".svelte-kit/../vite.config.ts",
        ".svelte-kit/../src/**/*.js",
        ".svelte-kit/../src/**/*.ts",
        ".svelte-kit/../src/**/*.svelte",
        ".svelte-kit/../tests/**/*.js",
        ".svelte-kit/../tests/**/*.ts",
        ".svelte-kit/../tests/**/*.svelte"
    ],
    "exclude": [
        ".svelte-kit/../node_modules/**"
    ]
}

[jasonlyu123]

Hmm. The lib config seems to be right. Does svelte-check also have the same error? If not, can you check if restarting the editor helps? Otherwise, we'll need a reproduction to check.

[anito]

Yes, svelte-check gives me an error on this subject too:

Error: Property 'keys' does not exist on type 'URLSearchParams'. (ts)
    const actionParam = new URLSearchParams(action.searchParams)
      .keys()
      .next()

So I think I'll make a fresh install to trace that down. I'll be back here as soon as I can make some findings. Appreciate your time!

[jasonlyu123]

Maybe it's sveltejs/kit#11721?