Side Effect Import Issue in TypeScript

Recently, typescript started giving me an error Cannot find module or type declarations for side-effect import every time I load a CSS file or a font file in the entry module of a framework such as Astro(Vite)/Nextjs.

The interesting part is, I didn't even change the typescript version of my project. It seemed like it was using some other version of typescript.

Then, I looked at the VS Code's Status Bar and figured out the project was using typescript v6 rather that v5 which was defined in my project.

But where was it coming from? It was coming from the JavaScript and TypeScript Nightly VS Code extension. It enables the nightly build of typescript to be used inside of VS Code so that you can try experimental features. I don't know why I had it installed and enabled in the first place because you don't need this extension for typescript support in VS Code.

I uninstalled the extension and reloaded the VS Code window using CMD/CTRL + Shift + P > Developer: Reload Window and now VS Code was using the typescript version defined in my project (v5.9.3).

If you want to keep this extension or have multiple typescript versions added to VS Code, you can select the exact version you want for your project by using CMD/CTRL + Shift + P > Select Typescript Version. This also works if you have an explicit version of typescript defined in your packages.

If you select the version of typescript installed as a package (in node_modules) from your dependencies, it will add a vscode setting "typescript.tsdk": "node_modules/typescript/lib" in the settings.json file of your project (will create one if none).

{
    "typescript.tsdk": "node_modules/typescript/lib"
}