fix: removing loader chain delimiter from error file name

e2e/cases/plugin-vue/sfc-build-error/index.test.ts

@@ -0,0 +1,21 @@
+import { rspackTest } from '@e2e/helper';
+
+const EXPECTED_FILE = 'File: ./src/App.vue.js?vue&type=script&lang=js:1:1';
+const EXPECTED_ERROR = `× ESModulesLinkingError: export 'default' (reexported as 'default') was not found`;
+
+rspackTest('should display Vue compilation error in dev', async ({ dev }) => {
+  const rsbuild = await dev();
+  await rsbuild.expectLog(EXPECTED_FILE, { strict: true });
+  await rsbuild.expectLog(EXPECTED_ERROR);
+});
+
+rspackTest(
+  'should display Vue compilation error in build',
+  async ({ build }) => {
+    const rsbuild = await build({
+      catchBuildError: true,
+    });
+    await rsbuild.expectLog(EXPECTED_FILE, { strict: true });
+    await rsbuild.expectLog(EXPECTED_ERROR);
+  },
+);

e2e/cases/plugin-vue/sfc-build-error/rsbuild.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+export default defineConfig({
+  plugins: [pluginVue()],
+});

e2e/cases/plugin-vue/sfc-build-error/src/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>{{ value }}</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+const value = ref(0);
+</script>

e2e/cases/plugin-vue/sfc-build-error/src/index.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#root');

packages/core/src/helpers/format.ts

@@ -1,4 +1,5 @@
 import type { StatsError } from '@rspack/core';
+import { removeLoaderChainDelimiter } from './stats';
 import { color } from './vendors';
 
 const formatFileName = (fileName: string) => {
@@ -25,7 +26,7 @@ function resolveFileName(stats: StatsError) {
     stats.moduleName;
 
   if (file) {
-    return file;
+    return removeLoaderChainDelimiter(file);
   }
 
   // `moduleIdentifier` is the absolute path with inline loaders
@@ -36,7 +37,7 @@ function resolveFileName(stats: StatsError) {
     if (matched) {
       const fileName = matched.pop();
       if (fileName) {
-        return fileName;
+        return removeLoaderChainDelimiter(fileName);
       }
     }
   }

packages/core/src/helpers/stats.ts

@@ -1,4 +1,4 @@
-import { logger } from '../logger';
+import { isVerbose, logger } from '../logger';
 import type { ActionType, RsbuildStats, Rspack } from '../types';
 import { isMultiCompiler } from './compiler';
 import { formatStatsError } from './format';
@@ -183,3 +183,15 @@ export function formatStats(
 
   return {};
 }
+
+/**
+ * Remove the loader chain delimiter from the module identifier.
+ * @example ./src/index.js!=!/node_modules/my-loader/index.js -> ./src/index.js
+ */
+export const removeLoaderChainDelimiter = (moduleId: string): string => {
+  if (isVerbose()) {
+    return moduleId;
+  }
+  const LOADER_CHAIN_SEPARATOR = '!=!';
+  return moduleId.split(LOADER_CHAIN_SEPARATOR)[0];
+};

packages/core/src/logger.ts

@@ -26,6 +26,8 @@ export const isDebug = (): boolean => {
   return ['rsbuild', 'builder', '*'].some((key) => values.includes(key));
 };
 
+export const isVerbose = (): boolean => logger.level === 'verbose';
+
 // setup the logger level
 if (isDebug()) {
   logger.level = 'verbose';

packages/core/src/server/devMiddlewares.ts

@@ -1,7 +1,7 @@
 import { castArray, pick } from '../helpers';
 import { isMultiCompiler } from '../helpers/compiler';
 import { requireCompiledPackage } from '../helpers/vendors';
-import { logger } from '../logger';
+import { isVerbose } from '../logger';
 import { rspack } from '../rspack';
 import type {
   InternalContext,
@@ -261,7 +261,7 @@ export const getDevMiddlewares = (
   const middlewares: Middlewares = [];
   const { buildManager } = options;
 
-  if (logger.level === 'verbose') {
+  if (isVerbose()) {
     middlewares.push(getRequestLoggerMiddleware());
   }
 

packages/core/src/server/middlewares.ts

@@ -4,7 +4,7 @@ import onFinished from 'on-finished';
 import { color } from '../helpers';
 import { getAssetsFromStats } from '../helpers/stats';
 import { addTrailingSlash } from '../helpers/url';
-import { logger } from '../logger';
+import { isVerbose, logger } from '../logger';
 import type {
   Connect,
   EnvironmentAPI,
@@ -246,7 +246,7 @@ export const getHtmlFallbackMiddleware: (params: {
     if (await isFileExists(filePath, buildManager.outputFileSystem)) {
       const newUrl = '/index.html';
 
-      if (logger.level === 'verbose') {
+      if (isVerbose()) {
         logger.debug(
           `    ${req.method} ${req.url} ${color.yellow('fallback to')} ${newUrl}`,
         );

packages/core/src/server/prodServer.ts

@@ -2,7 +2,7 @@ import type { Server } from 'node:http';
 import type { Http2SecureServer } from 'node:http2';
 import { getPathnameFromUrl } from '../helpers/path';
 import { requireCompiledPackage } from '../helpers/vendors';
-import { logger } from '../logger';
+import { isVerbose, logger } from '../logger';
 import type {
   Connect,
   InternalContext,
@@ -67,7 +67,7 @@ export class RsbuildProdServer {
     const { headers, proxy, historyApiFallback, compress, base, cors } =
       this.options.serverConfig;
 
-    if (logger.level === 'verbose') {
+    if (isVerbose()) {
       this.middlewares.use(getRequestLoggerMiddleware());
     }