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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.