chore: use source-map-js

Author: nanianlisao

examples/react/rsbuild.config.ts

@@ -3,4 +3,17 @@ import { pluginReact } from '@rsbuild/plugin-react';
 
 export default defineConfig({
   plugins: [pluginReact()],
+  dev: {
+    client: {
+      overlay: {
+        runtimeErrors: true,
+      },
+    },
+  },
+  tools: {
+    bundlerChain(config) {
+      config.devtool('source-map');
+      return config;
+    },
+  },
 });

examples/react/src/App.jsx

@@ -3,6 +3,10 @@ import './App.css';
 const App = () => {
   return (
     <div className="content">
+      <div onClick={() => console.log('xxs', d2z)} onKeyUp={() => {}}>
+        throw error
+      </div>
+
       <h1>Rsbuild with React</h1>
       <p>Start building amazing things with Rsbuild.</p>
     </div>

packages/core/modern.config.ts

@@ -18,6 +18,7 @@ const externals = [
   ...commonExternals,
   '@rsbuild/core/client/hmr',
   '@rsbuild/core/client/overlay',
+  '@rsbuild/core/client/runtimeErrors',
 ];
 
 // Since the relative paths of bundle and compiled have changed,
@@ -69,10 +70,11 @@ export default defineConfig({
       input: {
         hmr: 'src/client/hmr.ts',
         overlay: 'src/client/overlay.ts',
+        runtimeErrors: 'src/client/runtimeErrors.ts',
       },
       target: BUILD_TARGET.client,
       dts: false,
-      externals: ['./hmr'],
+      externals: ['./hmr', './overlay'],
       outDir: './dist/client',
       autoExtension: true,
       externalHelpers: true,

packages/core/package.json

@@ -27,6 +27,10 @@
       "types": "./dist-types/client/overlay.d.ts",
       "default": "./dist/client/overlay.js"
     },
+    "./client/runtimeErrors": {
+      "types": "./dist/client/runtimeErrors.d.ts",
+      "default": "./dist/client/runtimeErrors.js"
+    },
     "./types": {
       "types": "./types.d.ts"
     },
@@ -57,7 +61,7 @@
     "core-js": "~3.36.0",
     "html-webpack-plugin": "npm:[email protected]",
     "postcss": "^8.4.38",
-    "source-map": "0.5.7"
+    "source-map-js": "^1.2.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

packages/core/src/client/findSourceMap.ts

@@ -1,6 +1,3 @@
-// @ts-expect-error
-import { SourceMapConsumer } from 'source-map';
-
 const fetchContent = (url: string) => fetch(url).then((r) => r.text());
 
 const findSourceMap = async (fileSource: string, filename: string) => {
@@ -69,6 +66,8 @@ export const findSourceCode = async (sourceInfo: any) => {
   if (!smContent) return;
   const rawSourceMap = JSON.parse(smContent);
 
+  const { SourceMapConsumer } = await import('source-map-js');
+
   const consumer = await new SourceMapConsumer(rawSourceMap);
 
   // Use sourcemap to find the source code location
@@ -81,6 +80,8 @@ export const findSourceCode = async (sourceInfo: any) => {
   const sourceCode = consumer.sourceContentFor(pos.source);
   return {
     sourceCode: formatSourceCode(sourceCode, pos),
+    // Please use an absolute path in order to open it in vscode.
+    // Take webpack as an example. Please configure it correctly for [output.devtoolModuleFilenameTemplate](https://www.webpackjs.com/configuration/output/#outputdevtoolmodulefilenametemplate)
     sourceFile: url,
   };
 };

packages/core/src/client/overlay.ts

@@ -1,5 +1,4 @@
 import type { OverlayError } from '../types';
-import { formatRuntimeErrors } from './format';
 import { registerOverlay } from './hmr';
 
 function stripAnsi(content: string) {
@@ -339,19 +338,3 @@ if (typeof document !== 'undefined') {
     '[Rsbuild] Failed to display error overlay as document is not available, you can disable the `dev.client.overlay` option.',
   );
 }
-
-const config = RSBUILD_CLIENT_CONFIG;
-
-if (config.overlay.runtimeErrors) {
-  window.addEventListener('error', async (event) => {
-    const formatted = await formatRuntimeErrors(event, false);
-    createOverlay(formatted);
-  });
-
-  window.addEventListener('unhandledrejection', async (event) => {
-    if (event.reason?.stack) {
-      const formatted = await formatRuntimeErrors(event, true);
-      createOverlay(formatted);
-    }
-  });
-}

packages/core/src/client/runtimeErrors.ts

@@ -0,0 +1,14 @@
+import { formatRuntimeErrors } from './format';
+import { createOverlay } from './overlay';
+
+window.addEventListener('error', async (event) => {
+  const formatted = await formatRuntimeErrors(event, false);
+  createOverlay(formatted);
+});
+
+window.addEventListener('unhandledrejection', async (event) => {
+  if (event.reason?.stack) {
+    const formatted = await formatRuntimeErrors(event, true);
+    createOverlay(formatted);
+  }
+});

packages/core/src/server/compilerDevMiddleware.ts

@@ -31,6 +31,15 @@ function getClientPaths(devConfig: DevConfig) {
     clientPaths.push(`${require.resolve('@rsbuild/core/client/overlay')}`);
   }
 
+  if (
+    typeof devConfig?.client?.overlay === 'object' &&
+    devConfig.client.overlay.runtimeErrors
+  ) {
+    clientPaths.push(
+      `${require.resolve('@rsbuild/core/client/runtimeErrors')}`,
+    );
+  }
+
   return clientPaths;
 }