composite: true shows error in vscode after upgrading to version 5

[leozhao0709]

First, really thanks for this project! I've used this for a long time.

Today, I am upgrading the plugin to v5, but after upgrading, seems the Vscode cannot detected my scss module files with this plugin anymore.

I have a customer global.d.ts files specifying the type

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

But in the v5 version of this plugin, it shows the following error

File '/project/src/App.module.scss' is not listed within the file list of project '/project/tsconfig.json'. Projects must list all files or use an 'include' pattern.

But actually, the file already included in the tsconfig.json. If I remove this plugin or downgrade to the v4 version, then the above error will disappear.

And I have a very weird experience with the typescript v5 with this plugin also.

1. If I use typescript v5 with this plugin v5, then above error is showing and the style intellisense is not working.
2. If I use typescript v5 with this plugin v4, then above error is not showing and the style intellisense is not working.
3. If I use typescript v4 with this plugin v5, then above error is showing, but intellisense is working fine.
4. If I use typescript v4 with this plugin v4, then everything is working.

Any ideas about this in v5 version?

[leozhao0709]

Seems the issue is related to composite: true config in tsconfig.json. If I remove composite:true, then everything with v5 is working. Not sure why, but can be a temporary solution.

How can we use composite: true then?

[toondkn]

Also experiencing this exact issue.

What's even stranger...
When opening a monorepo with 1 base tsconfig.sjon at the repository root with references:[-snip-] and a bunch of projects with a tsconfig.json with composite:true that extend from the base tsconfig.json I observed this behavior:

Whenever I make a small inconsequential edit to any project's tsconfig.json, the "Projects must list all files" error dissappears while everthing keeps working correctly.

Whenever I trigger a TS language server restart in vscode, the issue reappears.

When I open a project directly with vscode, instead of the whole monorepo, this issue does not occur at all.

Using vscode 1.77.3, typescript 5.0.4, typescript-plugin-css-modules 5.0.1.

[Delevin888]

same issue.
when i set tsconfig.json compilerOptions.composite to true, got same problem.

[Wroud]

same here

[mrmckeb]

In TypeScript v5, a number of APIs were deprecated and we had to move to a new API. I don't have any composite projects to test against, but if someone can create a reproduction, I'd be happy to take a look and try to solve this :)

[leozhao0709]

@mrmckeb Thanks for your reply.

Actually, for any typescript project with typescript-plugin-css-modules, as long as the we set the composite: true in tsconfig.json, it will show this error.

And I created this repo to show the issue: https://github.com/leozhao0709/typescript-plugin-css-modules-test.

Thanks again for all your help.

[kyledetella]

I was running into the same issue with JSON files. As per this comment in #33827, I was able to fix the problem by adding the following to my tsconfig.json:

"include": ["**/*", "**/*.json"]

So the same may work for {s},css files.

[bppdddqqqq]

I was running into the same issue with JSON files. As per this comment in #33827, I was able to fix the problem by adding the following to my tsconfig.json:

"include": ["**/*", "**/*.json"]

So the same may work for {s},css files.

I've tried it with my WIP Monorepo and it's not working. composite: true is enabled :/

[mrmckeb]

Hi all,

I tried again to solve this today using @leozhao0709's repo, and still saw the issue that @Delevin888 shared in their screenshot.

File '/[redacted]/src/App.module.scss' is not listed within the file list of project '/[redacted]/tsconfig.json'. Projects must list all files or use an 'include' pattern. ts(6307)

I saw the same thing in my test project when I enabled composite.

When searching the TypeScript repo, I found the below issue. Adding *.json to include did solve the issue in that case, but I imagine that's because TypeScript has a native understanding of JSON files.
microsoft/TypeScript#33399

CC @jakebailey who may have some insights here, but as this is an error from TypeScript - and not the plugin - I'm not sure what to do here.

[jakebailey]

I don't have any immediate guesses, and would probably have to do a bunch of debugging to figure out what's happening. I likely won't have time to look at this myself for a few weeks. Maybe @sheetalkamat has a guess.

I will say that from re-skimming this project, I believe this plugin works by effectively "lying" to TypeScript about the css files and telling it that they are actually TS files. These days, TypeScript supports arbitrary file extensions, such that a .css file can be typed by a .d.css.ts file. I almost wonder if this plugin could be reworked and simplified such that all it does is provide those sibling declaration files in memory. (I can't remember if I suggested that before, but I think I did.)

Even neater would be to have a tool that can be run that dumps those faked d.css.ts files to disk, such that regular tsc runs can see them and typecheck (then the plugin can do that in memory so the tool doesn't need to be running).

[mrmckeb]

Thanks @jakebailey! Yes, you're correct - it's all trickery today which is why some features are quite hard to implement.

I almost wonder if this plugin could be reworked and simplified such that all it does is provide those sibling declaration files in memory. (I can't remember if I suggested that before, but I think I did.)

Do you have an example of supplying something like a .d.css.ts in memory? I think that's the approach I'd like to take here.

Even neater would be to have a tool that can be run that dumps those faked d.css.ts files to disk, such that regular tsc runs can see them and typecheck (then the plugin can do that in memory so the tool doesn't need to be running).

There are a few projects that do this, but people turn to projects like this because they don't like the "noise" in their projects. The generated files make it harder to skim file trees, and then you need a process that generates those locally and in CI or things break.

[jakebailey]

I don't have an example for this, no. Though I vaguely remember that vue/volar/etc do something similar.

[kizu]

Not being able to use it with composite:true is a blocker for us. It would be nice to know if anyone did find a workaround for this over time, or if there is any approximate ETA for looking at this issue? (asking not to rush anything, just to bump the issue and understand the state of things)

[mrmckeb]

Hi @kizu, I'm definitely open to a PR if you're interested.

I do plan to take a look at this is in the future, but haven't had much time recently, sorry!