Building Nested TypeScript Projects

Issue

I'm using Typescript, React, and Vite.

This is my project structure. I have a tsconfig.json file at the root level. And I have a public/tsconfig.worker.json dedicated to my public/serviceWorker.ts file.

.
├── tsconfig.json
├── src/
│   └── constants/config.ts
└── public/
    ├── serviceWorker.ts
    └── tsconfig.worker.json

In my public/serviceWorker.ts file, I'm importing a variable from src/constants/config.ts.

// public/serviceWorker.ts

import Variable from "../src/constants/config";

I'm seeing this error in the import statement.

File '<path>/src/constants/config.ts' is not listed within the file list of project '<path>/public/tsconfig.worker.json'. Projects must list all files or use an 'include' pattern.

Below are my tsconfigs.

// root tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "esModuleInterop": true,
    "skipLibCheck": true,

    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    // ...
  },
  "include": ["src", "svg.d.ts", "public/serviceWorker.ts"],
  "references": [
    { "path": "./tsconfig.node.json" },
    { "path": "./public/tsconfig.worker.json" }
  ]
}

// public/tsconfig.worker.json

{
  "compilerOptions": {
    "rootDir": "../",
    "composite": true,
    "module": "es2022",
    "noEmit": false,
    "moduleResolution": "bundler",
    "lib": ["WebWorker", "ES2022"],
  }
}

Also, I'm able to build ("build": "tsc && vite build") but the build includes serviceWorker.ts and tsconfig.worker.json files in the output like below.

.
└── dist/
    ├── assets/
    ├── serviceWorker.ts
    └── tsconfig.worker.json

Solution

The structure of your project is somewhat confusing. It seems to me, like you try to build the whole project from the root, expecting that tsconfig.json will be applied for the src folder and it will be merged with public/tsconfig.worker.json for the public/serviceWorker.ts file. But, when you run build public/tsconfig.worker.json is applied to the public/serviceWorker.ts independently from the tsconfig.json, which means it doesn't know about { "include": "public/serviceWorker.ts" }. Try to add { "include": "serviceWorker.ts" } into public/tsconfig.worker.json and remove { "include": "public/serviceWorker.ts" } from the root tsconfig.json.

Now about dist folder. This is the default vite behavior. public folder is supposed to be used for static assets only that don't require compilation, so you should think about putting your serviceWorker.ts somewhere else. I would try to place into src, since as far as I can see, you compile it anyway, so it's not a static asset. vite knows how to handle worker files out of the box.

Overall, I'd merge both tsconfigs into one and put serviceWorker.ts into src folder, e.g. src/workers/serviceWorker.ts.

Answered By - Bogdan Gishka