When used with ts-checker-rspack-plugin, type errors are reported (occasionally)

[paniuncle]

与 ts-checker-rspack-plugin 一起使用时，会提示类型错误（偶尔）

[issy]

I am also experiencing this issue in a repo I'm working on. The problem is that ts-checker-rspack-plugin (and rsbuild-plugin-type-check) starts the TypeScript compilation process while the CSS module declaration files are still being generated. So the TypeScript compiler will type check a CSS module before the declaration file for it has been generated.

I'm not sure if there's a way to fix this within this plugin? I think the solution is probably for ts-checker-rspack-plugin to wait for compilation to finish before starting TypeScript. Unless there's a way to request the declaration file from the compiler before checking types for module that depends on a CSS module? I haven't seen any discussion about this in https://github.com/rspack-contrib/rsbuild-plugin-type-check or https://github.com/rspack-contrib/ts-checker-rspack-plugin

[chenjiahan]

Have you added the built-in types of @rsbuild/core?

/// <reference types="@rsbuild/core/types" />

https://rsbuild.rs/guide/styling/css-modules#type-declaration

It provides basic CSS Modules types to avoid the above issue.

[issy]

@chenjiahan in my case, yes we are referencing the core types. The issue occurs when we use the following syntax in our files, usually with some util like classNames

{
  [styles.title]: someCondition,
  [styles.vivid]: anotherCondition
}

and the TypeScript error is:

error   Build errors:
File: ./src/MyView.tsx:29:42
  × Error: TS2464: A computed property name must be of type 'string', 'number', 'symbol', or 'any'.

Unfortunately I can't reproduce in a small repo, because you need a sufficiently large module graph in order to create the timing conditions that produce this issue. (a production build in our repo takes about 70 seconds)

Let me know if there's anything I can do to provide more context 🙇

[chenjiahan]

Thank you for your feedback. I have not encountered the problem you mentioned. It would be very helpful if you can have a minimal reproduction. ❤️

[issy]

@chenjiahan unfortunately the repos I work on are private, so I can't share them. I haven't had any luck yet reproducing in a fresh project.

The command I'm using to reproduce this is:

rm src/**/*.module.scss.d.ts && npx rsbuild build

This cleans the CSS module declaration files before running the build, to replicate a CI environment where the build is running for the first time.

I discovered that I can only reproduce this issue (in the main project) when all the modules importing the CSS modules are lazy loaded. If I import all the CSS modules upfront (in the app root, or any non-lazy-loaded module that would be part of the main bundle), then the issue goes away.

To lazy load our files, we do something like this:

const createComponentLoader = (fileLoader) => (componentKey) => async () => {
  const component = await fileLoader();
  return components[componentKey];
};
const loadComponent = createComponentLoader(() => import('./bunchOfComponents'));

const routeComponents = [
  loadComponent('Foo'),
  loadComponent('Bar'),
  loadComponent('Baz')
];

This is just so that we can have our entire route tree upfront without loading the entire app in one go (I've omitted a lot of code here, of course). If I include import './MyStyles.module.scss' in one of these route files (these are not lazy loaded) then the CSS module declaration files are always generated in time.
Maybe there's a way we can put the CSS modules in the hot path for the compiler, without having to manually build up a registry of CSS modules by hand in the app code? I'm not familiar with the internals of Rspack/Rsbuild, so forgive me if I've missed something obvious. Is it just that the compiler isn't following those import() calls until the very end of compilation?

The module tree is something like this

main.js
  > foo.js
    > Something.tsx (lazy loaded)
      > Something.module.scss
  > bar.js
    > Stuff.tsx (lazy loaded)
      > Stuff.module.scss

I hope that makes sense. foo.js is imported normally, but Something.tsx (and therefore Something.module.scss) is lazily imported. Does that shed any light?

[chenjiahan]

CSS Modules are processed by an Rspack loader in the @rsbuild/plugin-typed-css-modules. This means that the types will be emitted after the CSS Modules have been transformed.

Meanwhile, the type checker runs in a separate process. By the time the type checker has finished, the CSS Module types may not have been emitted.

However, with Rsbuild's built-in CSS Modules types, there should not be any type errors, even if the types are not emitted.