TyphonJS•15mo ago

Issues Configuring TyphonJS in TS

I'm receiving this message in my TS Files: Cannot find module '#runtime/svelte/application' or its corresponding type declarations. I thought including a paths property in tsconfig.json would fix it, but no:

        "paths": {
            "@/*": ["src/*"],
            "#runtime/*": ["node_modules/@typhonjs-fvtt/runtime/*"],
            "#standard/*": ["node_modules/@typhonjs-fvtt/svelte-standard/*"]
        },

        "paths": {
            "@/*": ["src/*"],
            "#runtime/*": ["node_modules/@typhonjs-fvtt/runtime/*"],
            "#standard/*": ["node_modules/@typhonjs-fvtt/svelte-standard/*"]
        },

What am I doing wrong?

6 Replies

MagusOP•15mo ago

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ES2022",
        "moduleResolution": "Node",

        "baseUrl": "./",
        "declaration": true,
        "declarationDir": "lib",

        "strict": true,

        "skipLibCheck": true,
        "isolatedModules": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "jsx": "preserve",

        "allowJs": true,
        "checkJs": true,

        "noImplicitOverride": true,

        "paths": {
            "@/*": ["src/*"],
            "#runtime/*": ["node_modules/@typhonjs-fvtt/runtime/*"],
            "#standard/*": ["node_modules/@typhonjs-fvtt/svelte-standard/*"]
        },
        "lib": ["ES2022", "DOM"],
        "typeRoots": ["node_modules", "types"],
        "types": ["dice-so-nice", "foundry", "handlebars", "@types/jquery", "socket.io", "svelte"]
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
    "exclude": ["node_modules"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ES2022",
        "moduleResolution": "Node",

        "baseUrl": "./",
        "declaration": true,
        "declarationDir": "lib",

        "strict": true,

        "skipLibCheck": true,
        "isolatedModules": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "jsx": "preserve",

        "allowJs": true,
        "checkJs": true,

        "noImplicitOverride": true,

        "paths": {
            "@/*": ["src/*"],
            "#runtime/*": ["node_modules/@typhonjs-fvtt/runtime/*"],
            "#standard/*": ["node_modules/@typhonjs-fvtt/svelte-standard/*"]
        },
        "lib": ["ES2022", "DOM"],
        "typeRoots": ["node_modules", "types"],
        "types": ["dice-so-nice", "foundry", "handlebars", "@types/jquery", "socket.io", "svelte"]
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
    "exclude": ["node_modules"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

TyphonJS (Michael)•15mo ago

Foundry in general is not TS friendly at this point especially with no well functioning community types. There are types shipped w/ TRL for the library code, but not the Svelte components currently. The types shipped with TRL only know about the TRL code and not any underlying extensions into Foundry. IE SvelteApplication has types, but it extends the Foundry Application that doesn't have types. For TS though you need to set module and moduleResolution to "node16" or "nodenext" and include the imports field in your package.json. It should look like this:

{
  "imports": {
    "#runtime/*": "@typhonjs-fvtt/runtime/*",
    "#standard/*": "@typhonjs-fvtt/svelte-standard/*"
  }
}

{
  "imports": {
    "#runtime/*": "@typhonjs-fvtt/runtime/*",
    "#standard/*": "@typhonjs-fvtt/svelte-standard/*"
  }
}

Typescript when configured for modern Node should be able to then find the types without explicit entries in tsconfig.json. So do take a look at various updated info on configuring TS. Also probably use the latest TS. There is also a new moduleResolution "bundler" to evaluate if that helps. An article that kind of goes over the new options without a whole bunch of detail: https://www.totaltypescript.com/concepts/option-module-must-be-set-to-nodenext-when-option-moduleresolution-is-set-to-nodenext

MagusOP•15mo ago

For TS though you need to set module and moduleResolution to "node16" or "nodenext" and include the imports field in your package.json. It should look like this:

Yes this solved most of my issues, ty

TyphonJS (Michael)•15mo ago

Best of luck with everything. It's going to be a mixed bag as far as the Foundry core types go, so mileage may vary.

MagusOP•15mo ago

It broke my Foundry Global Types, but im looking for the solution Im going to post if I find it, just in case someone else might have the problem

Broken global.d.ts when "module" is set to node16 and moduleResolution is set to nodenext

Solution: "typeRoots" and "types" are not enough, need to include the global.d.ts in "include" as well Just in case someone's happens to read this: for typescript to properly function in svelte you need a svelte.config.js with a preprocessor, otherwise svelte thinks its commonjs and weird bugs happen if you set moduleResolution to NodeNext

kgar•13mo ago

Hello from one month later. Thanks for the tip! 🏄‍♂️

Gaming

Programming

Issues Configuring TyphonJS in TS