Error overlay not showing type errors

[fazlulShanto]

i have migrated the app from craco to rsbuild (version 1.1.8 ). problem is if there is an error it doesn't show the error stack / overlay in dev mode. i even manually enabled the overlay although from version 0.0.6 it's enabled by defualt.
we have a generic error boundary component. but previously webpack used to show error stack & exact position where the error occurred.
this is my rsbuild.config.ts

import { defineConfig, loadEnv } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSass } from '@rsbuild/plugin-sass';
import { pluginSvgr } from '@rsbuild/plugin-svgr';
const { publicVars } = loadEnv({ prefixes: ['REACT_APP_'] });
import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
import { pluginEslint, type PluginEslintOptions } from '@rsbuild/plugin-eslint';

const eslintOptions: PluginEslintOptions = {
  eslintPluginOptions: {
    configType: 'flat',
  },
};
// to enable RSDoctor - Build analyzer
const shouldEanbleRSDoctor = false;
// to enable typescripts' type check
const shouldEnableTypeCheck = false;

export default defineConfig({
  plugins: [
    pluginReact(),
    pluginSass({
      sassLoaderOptions: {
        api: 'modern-compiler',
        implementation: require.resolve('sass'),
        sassOptions: {
          silenceDeprecations: [
            'color-module-compat',
            'duplicate-var-flags',
            'color-4-api',
            'color-functions',
            'global-builtin',
            'import',
          ],
        },
      },
    }),
    pluginSvgr({ mixedImport: true }),
    pluginNodePolyfill(),
    pluginEslint(eslintOptions),
    pluginTypeCheck({ enable: shouldEnableTypeCheck }),
  ],
  source: {
    define: publicVars,
  },
  // server:{
  //   port:4005
  // },
  html: {
    template: './public/index.html',
  },

  output: {
    polyfill: 'usage',
    distPath: {
      root: 'build',
    },
  },
  tools: {
    rspack: {
      // Add support for .mjs files
      module: {
        rules: [
          {
            test: /\.mjs$/,
            include: /node_modules/,
            type: 'javascript/auto',
          },
        ],
      },
      // ignoreWarnings: [/Deprecation Warning/],
      plugins: [
        shouldEanbleRSDoctor &&
          new RsdoctorRspackPlugin({
            disableTOSUpload: true,
            linter: {
              rules: {
                // Don't warn about using non ES5 features
                'ecma-version-check': 'off',
              },
            },
            supports: { generateTileGraph: true },
          }),
      ],
    },
  },
  dev: {
    client: {
      overlay: true,
    },
  },
});

[9aoy]

Please provide a minimal reproduction to help us address the issue, we cannot assist with troubleshooting based on the information currently provided.

[NeroMorto]

@9aoy Hi, I have same problem (not sure 100% about topic author problem), but any way).
Here is an example
In App.tsx, I have a type (TS) error, but it is only displayed in the console and not in the overlay on the page.
Is there a way to configure it to be displayed in the overlay? I couldn't find any relevant options in the rsbuild documentation or the plugin-type-check configuration options.

[9aoy]

Type errors are reported asynchronously during dev in order not to block compilation. If you want ts errors to be displayed in the error overlay, you can modify the configuration as follows:

export default defineConfig({
  plugins: [pluginTypeCheck({
    tsCheckerOptions: {
+      async: false,
    }
  })],
});

see https://github.com/rspack-contrib/ts-checker-rspack-plugin#async

[NeroMorto]

Thank you very much! Have a nice day!

[9aoy]

Hi, in rsbuild-plugin-type-check v1.2.0, we support display type checking errors in the error overlay without specifying the async: false option~