feat: should display error in overlay when exist type errors in dev m…

…ode (#13)

* fix: should display error in overlay when exist type errors in dev mode

* docs: Disable type errors in the error overlay

* Update README.md

---------

Co-authored-by: neverland <chenjiahan.jait@bytedance.com>

README.md

@@ -190,6 +190,20 @@ pluginTypeCheck({
 });
 ```
 
+#### Disable type errors from the error overlay
+
+By default, type errors will be reported to Dev Server and displayed in the Rsbuild error overlay in development mode.
+
+If you don't want type errors to be displayed in the error overlay, you can disable it by setting `devServer: false`:
+
+```ts
+pluginTypeCheck({
+  tsCheckerOptions: {
+    async: true,
+    devServer: false,
+  },
+});
+```
 ## Notes
 
 - If you have enabled `ts-loader` in your project and manually configured `compileOnly: false`, please disable the Type Check plugin to avoid duplicate type checking.

package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "deepmerge": "^4.3.1",
-    "ts-checker-rspack-plugin": "^1.0.1",
+    "ts-checker-rspack-plugin": "^1.1.0",
     "json5": "^2.2.3",
     "reduce-configs": "^1.1.0"
   },

test/basic/index.test.ts

@@ -75,6 +75,39 @@ test('should throw error when exist type errors in dev mode', async ({
   await server.close();
 });
 
+test('should display error in overlay when exist type errors in dev mode', async ({
+  page,
+}) => {
+  const { restore } = proxyConsole();
+
+  const rsbuild = await createRsbuild({
+    cwd: __dirname,
+    rsbuildConfig: {
+      plugins: [pluginTypeCheck()],
+      server: {
+        port: getRandomPort(),
+      },
+    },
+  });
+
+  const { server, urls } = await rsbuild.startDevServer();
+
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  await page.goto(urls[0]);
+
+  const errorOverlay = page.locator('rsbuild-error-overlay');
+
+  expect(
+    (await errorOverlay.locator('.content').allInnerTexts()).find((txt) =>
+      txt.includes('TS2345: Argument of type'),
+    ),
+  ).toBeDefined();
+
+  restore();
+  await server.close();
+});
+
 test('should not throw error when the file is excluded', async () => {
   const rsbuild = await createRsbuild({
     cwd: __dirname,