Additional debugging info

[studiokeywi]

Subject

Installation

Description

Brief

Add a section to "Debugging" that discusses the behavior of TypeScript settings compilerOptions.module and compilerOptions.moduleResolution and its impact on using Panda

Details

I encountered an issue related to tsconfig.json settings that I did not see in the documentation while troubleshooting a fresh Svelte-based install for Panda

My goal is to work on a reusable style library for my own projects, and so I set up my Svelte app using the 'Library' setting (as this is the "barebones scaffolding for new Svelte libraries", as opposed to the 'Skeleton' setting which is the "barebones scaffolding for new SvelteKit apps")

However, the 'Library' setting ends up generating a different set of entries for compilerOptions.module and compilerOptions.moduleResolution within the tsconfig.json files. Specifically, a Skeleton setup will generate with "module": "esnext", "moduleResolution": "bundler", but a Library setup will generate with "module": "nodenext", "moduleResolution": "nodenext"

As it turns out, the "NodeNext" settings for tsconfig.json caused me two significant issues -- the first of which was that my IDE had to be explicitly told the filename including extension for any imports to work (^1), and the second of which is that even when fully qualified, the typings were not correctly associated (^2)

It took some experimentation for me to realize why this was happening, and thankfully I have no concerns/issues with using the "ESNext/Bundler" settings in my project (^3). Since I haven't seen any information about this in the documentation, I thought it would be good to find a place to call out this difference in tsconfig.json settings as it potentially could impact developers in other frameworks/projects outside of my experience with Svelte/SvelteKit

Image Reference 1

Image Reference 2

Image Reference 3