feat: allow to import TS files with js extension (#3536)

e2e/cases/typescript/extension-alias/index.test.ts

@@ -0,0 +1,10 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+test('should allow to import TS files with .js extension', async ({ page }) => {
+  await build({
+    cwd: __dirname,
+    page,
+  });
+  expect(await page.evaluate(() => window.test)).toBe(1);
+});

e2e/cases/typescript/extension-alias/src/bar.tsx

@@ -0,0 +1,3 @@
+export const bar = () => {
+  return <div>bar</div>;
+};

e2e/cases/typescript/extension-alias/src/foo.ts

@@ -0,0 +1 @@
+export const foo = 1;

e2e/cases/typescript/extension-alias/src/index.ts

@@ -0,0 +1,12 @@
+import { bar } from './bar.js';
+import { foo } from './foo.js';
+
+declare global {
+  interface Window {
+    test: number;
+  }
+}
+
+window.test = foo;
+
+console.log(bar);

e2e/cases/typescript/extension-alias/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@rsbuild/config/tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "outDir": "./dist",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "*.test.ts"]
+}

packages/compat/webpack/tests/__snapshots__/default.test.ts.snap

@@ -326,6 +326,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
     },
   ],
   "resolve": {
+    "extensionAlias": {
+      ".js": [
+        ".ts",
+        ".tsx",
+        ".js",
+      ],
+    },
     "extensions": [
       ".ts",
       ".tsx",
@@ -685,6 +692,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
     },
   ],
   "resolve": {
+    "extensionAlias": {
+      ".js": [
+        ".ts",
+        ".tsx",
+        ".js",
+      ],
+    },
     "extensions": [
       ".ts",
       ".tsx",
@@ -993,6 +1007,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     },
   ],
   "resolve": {
+    "extensionAlias": {
+      ".js": [
+        ".ts",
+        ".tsx",
+        ".js",
+      ],
+    },
     "extensions": [
       ".ts",
       ".tsx",
@@ -1284,6 +1305,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     },
   ],
   "resolve": {
+    "extensionAlias": {
+      ".js": [
+        ".ts",
+        ".tsx",
+        ".js",
+      ],
+    },
     "extensions": [
       ".ts",
       ".tsx",

packages/core/package.json

@@ -90,7 +90,7 @@
     "reduce-configs": "^1.0.0",
     "rsbuild-dev-middleware": "0.1.1",
     "rslog": "^1.2.3",
-    "rspack-chain": "^1.0.1",
+    "rspack-chain": "^1.0.3",
     "rspack-manifest-plugin": "5.0.1",
     "sirv": "^2.0.4",
     "style-loader": "3.3.4",

packages/core/src/plugins/resolve.ts

@@ -24,7 +24,13 @@ function applyFullySpecified({
     .resolve.set('fullySpecified', false);
 }
 
-function applyExtensions({ chain }: { chain: RspackChain }) {
+function applyExtensions({
+  chain,
+  tsconfigPath,
+}: {
+  chain: RspackChain;
+  tsconfigPath: string | undefined;
+}) {
   const extensions = [
     // most projects are using TypeScript, resolve .ts(x) files first to reduce resolve time.
     '.ts',
@@ -36,6 +42,13 @@ function applyExtensions({ chain }: { chain: RspackChain }) {
   ];
 
   chain.resolve.extensions.merge(extensions);
+
+  if (tsconfigPath) {
+    // TypeScript allows importing TS files with `.js` extension
+    chain.resolve.extensionAlias.merge({
+      '.js': ['.ts', '.tsx', '.js'],
+    });
+  }
 }
 
 function applyAlias({
@@ -90,7 +103,7 @@ export const pluginResolve = (): RsbuildPlugin => ({
       handler: (chain, { environment, CHAIN_ID }) => {
         const { config, tsconfigPath } = environment;
 
-        applyExtensions({ chain });
+        applyExtensions({ chain, tsconfigPath });
 
         applyAlias({
           chain,

packages/core/tests/__snapshots__/default.test.ts.snap

@@ -374,6 +374,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
     "alias": {
       "@swc/helpers": "<ROOT>/node_modules/<PNPM_INNER>/@swc/helpers",
     },
+    "extensionAlias": {
+      ".js": [
+        ".ts",
+        ".tsx",
+        ".js",
+      ],
+    },
     "extensions": [
       ".ts",
       ".tsx",
@@ -829,6 +836,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
     "alias": {
       "@swc/helpers": "<ROOT>/node_modules/<PNPM_INNER>/@swc/helpers",
     },
+    "extensionAlias": {
+      ".js": [
+        ".ts",
+        ".tsx",
+        ".js",
+      ],
+    },
     "extensions": [
       ".ts",
       ".tsx",
@@ -1157,6 +1171,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     "alias": {
       "@swc/helpers": "<ROOT>/node_modules/<PNPM_INNER>/@swc/helpers",
     },
+    "extensionAlias": {
+      ".js": [
+        ".ts",
+        ".tsx",
+        ".js",
+      ],
+    },
     "extensions": [
       ".ts",
       ".tsx",
@@ -1558,6 +1579,13 @@ exports[`tools.rspack > should match snapshot 1`] = `
     "alias": {
       "@swc/helpers": "<ROOT>/node_modules/<PNPM_INNER>/@swc/helpers",
     },
+    "extensionAlias": {
+      ".js": [
+        ".ts",
+        ".tsx",
+        ".js",
+      ],
+    },
     "extensions": [
       ".ts",
       ".tsx",