VS Code only shows types if TypeScript is installed

[robots4life]

Describe the bug

Cannot find module '$app/navigation' or its corresponding type declarations. It seems goto cannot be used or something is off with $app/navigation.

Reproduction

https://github.com/robots4life/goto

npm list @sveltejs/kit => goto@0.0.1 /shared/httpd/goto └── @sveltejs/kit@1.0.0-next.294

src/routes/index.svelte

<script>
    import {goto} from '$app/navigation';
	// Cannot find module '$app/navigation' or its corresponding type declarations.js(2307)

    goto('/profile');
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

svelte.config.js

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter(),
	}
};

export default config;

System Info

Linux

System:
    OS: Linux 5.4 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 2.44 GB / 15.53 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.14.0 - /opt/nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.3.1 - /opt/nvm/versions/node/v16.14.0/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.31 
    @sveltejs/kit: next => 1.0.0-next.294 
    svelte: ^3.44.0 => 3.46.4

Windows

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 8.69 GB / 15.80 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.30)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.31
    @sveltejs/kit: next => 1.0.0-next.294
    svelte: ^3.44.0 => 3.46.4

Severity

blocking all usage of SvelteKit

Additional Information

No response

[rmunn]

Going back to Svelte-Kit version 1.0.0-next.288 appears to work, while 1.0.0-next.289 appears to manifest the bug.

[robots4life]

When I try to run npm install on this package.json

{
  "name": "latest-kit",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "prepare": "svelte-kit sync"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "1.0.0-next.288",
    "svelte": "^3.44.0"
  },
  "type": "module"
}

I get this error.

npm timing reify:build Completed in 298ms
npm timing reify:trash Completed in 7ms
npm timing reify:save Completed in 54ms
npm timing reify Completed in 9846ms

> latest-kit@0.0.1 prepare
> svelte-kit sync


  ERROR
    Invalid command: sync

  Run `$ svelte-kit --help` for more info.

npm timing command:install Completed in 10021ms
npm verb stack Error: command failed
npm verb stack     at ChildProcess.<anonymous> (/opt/nvm/versions/node/v17.4.0/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/index.js:64:27)
npm verb stack     at ChildProcess.emit (node:events:520:28)
npm verb stack     at maybeClose (node:internal/child_process:1090:16)
npm verb stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm verb pkgid latest-kit@0.0.1
npm verb cwd /shared/httpd/latest-kit
npm verb Linux 5.4.0-99-generic
npm verb argv "/opt/nvm/versions/node/v17.4.0/bin/node" "/opt/nvm/versions/node/v17.4.0/bin/npm" "install" "--verbose"
npm verb node v17.4.0
npm verb npm  v8.3.1
npm ERR! code 1
npm ERR! path /shared/httpd/latest-kit
npm ERR! command failed
npm ERR! command sh -c svelte-kit sync
npm verb exit 1
npm timing npm Completed in 10304ms
npm verb code 1

When I remove "prepare": "svelte-kit sync" from package.json I can run npm install fine, however when I run npm run prepare after the install I get the Invalid command: sync error. However I can confirm goto works in next.288.

Regarding the svelte-kit sync issue, could this be related to this #4165 ?

[benmccann]

I hid your last comment to avoid discussing multiple things here. I have no problem running npx svelte-kit sync on your repo

I confirmed that VS Code is not finding import {goto} from '$app/navigation'; on newly created JS projects. It is however working on TS projects

[benmccann]

It works if you install TypeScript. Rich suggested three options: we could a) skip the jsconfig if you choose no typescript, or b) always install typescript regardless of the user's choice. or c) keep things as they are, and tell people that if they want typechecking in their JS project they will need to install typescript

[jasonlyu123]

I think the root problem is a bug in create-svelte. The only allowed .d.ts file in the js template is global.d.ts. But it has been renamed to app.d.ts. So there isn't an app.d.ts if you chose the js template.

kit/packages/create-svelte/scripts/build-templates.js

Line 72 in 76d26ec

if (file.name.endsWith('global.d.ts')) js.push(file);

[benmccann]

Yes, that was it. Fixed in #4295

A big thank you for finding that!