Cloud9 Typescript cannot find module $lib in sveltekit app

Question

Typescript warnings indicate that it cannot find the module at '$lib/components' on the import statement.

Ex.

```
import { resource } from "$lib/ts/resource"
```

I tried declaring the 'baseUrl' in '.sveltekit/tsconfig.json' but I get a warning in terminal that this inteferes with the operations and then change is automatically removed. I also tried applying some changes to '/tsconfig.json' - changing the 'baseUrl', 'path', and 'moduleResolution'. None of this removed the ts $lib warning.

In running build and dev scripts, I can see the results look fine. My conclusion is that this warning is harmless and is a result of cloud9 internal settings. Is this is incorrect? Is there something I can try to address the warnings?

The app was initially created using the standard vite framework with typescript. Below are the project tsconfig settings.

Filepath: /.svelte-kit/tsconfig.json

```
{
	"compilerOptions": {
		"paths": {
			"$lib": [
				"../src/lib"
			],
			"$lib/*": [
				"../src/lib/*"
			]
		},
		"rootDirs": [
			"..",
			"./types"
		],
		"verbatimModuleSyntax": true,
		"isolatedModules": true,
		"lib": [
			"esnext",
			"DOM",
			"DOM.Iterable"
		],
		"moduleResolution": "bundler",
		"module": "esnext",
		"noEmit": true,
		"target": "esnext"
	},
	"include": [
		"ambient.d.ts",
		"non-ambient.d.ts",
		"./types/**/$types.d.ts",
		"../vite.config.js",
		"../vite.config.ts",
		"../src/**/*.js",
		"../src/**/*.ts",
		"../src/**/*.svelte",
		"../tests/**/*.js",
		"../tests/**/*.ts",
		"../tests/**/*.svelte"
	],
	"exclude": [
		"../node_modules/**",
		"../src/service-worker.js",
		"../src/service-worker/**/*.js",
		"../src/service-worker.ts",
		"../src/service-worker/**/*.ts",
		"../src/service-worker.d.ts",
		"../src/service-worker/**/*.d.ts"
	]
}
```
Filepath: /tsconfig.json

```
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"module": "ES2015",
		"moduleResolution": "bundler",
		"allowImportingTsExtensions": true,
	},
	"include": ["src/**/*", "tests/**/*"]
	// 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
}
```

re:Post Agent · Answer

The TypeScript warnings you're experiencing in Cloud9 regarding the inability to find modules at '$lib/components' are likely due to the IDE's configuration not fully recognizing the SvelteKit project structure and its path aliases.

These warnings are indeed harmless if your build and dev scripts are running without issues. The problem is more related to the IDE's understanding of the project rather than actual issues with your code or configuration.

However, there are a few things you can try to address these warnings in Cloud9:

1. Make sure you have the latest version of the TypeScript extension installed in your Cloud9 environment.

2. Instead of modifying the '.svelte-kit/tsconfig.json' file (which gets automatically generated and shouldn't be manually edited), try adding a "paths" configuration to your root 'tsconfig.json' file:

```json
   {
     "compilerOptions": {
       // ... other options ...
       "baseUrl": ".",
       "paths": {
         "$lib": ["src/lib"],
         "$lib/*": ["src/lib/*"]
       }
     }
   }
   ```

3. If you're using VS Code as your editor within Cloud9, you can try creating a 'jsconfig.json' file in the root of your project with similar path configurations:

```json
   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "$lib": ["src/lib"],
         "$lib/*": ["src/lib/*"]
       }
     }
   }
   ```

4. Ensure that the TypeScript version used by your IDE matches the one used by your project. You can specify this in your 'tsconfig.json':

```json
   {
     "compilerOptions": {
       // ... other options ...
     },
     "typescript": {
       "version": "4.9.5" // or whatever version you're using
     }
   }
   ```

5. Try restarting the TypeScript server in your IDE. In VS Code, you can do this by opening the command palette (Ctrl+Shift+P or Cmd+Shift+P) and searching for "TypeScript: Restart TS Server".

If none of these solutions resolve the warnings, you may need to accept that they are indeed harmless IDE warnings and not actual issues with your code. As long as your application builds and runs correctly, these warnings shouldn't affect your development process significantly.  
**Sources**  
[Enhanced TypeScript support and features - AWS Cloud9](https://docs.aws.amazon.com/cloud9/latest/user-guide/projects.html)  
[Customize your project settings - AWS Cloud9](https://docs.aws.amazon.com/cloud9/latest/user-guide/settings-project-change.html)

Cloud9 Typescript cannot find module $lib in sveltekit app

Relevant content