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

chenjiahan · web-flow · commit 00917abc33a5 · 2024-11-05T16:09:12.000+08:00
diff --git a/e2e/cases/typescript/const-enum/index.test.ts b/e2e/cases/typescript/const-enum/index.test.ts
diff --git a/e2e/cases/typescript/const-enum/src/foo.ts b/e2e/cases/typescript/const-enum/src/foo.ts
diff --git a/e2e/cases/typescript/const-enum/src/index.ts b/e2e/cases/typescript/const-enum/src/index.ts
diff --git a/e2e/cases/typescript/const-enum/tsconfig.json b/e2e/cases/typescript/const-enum/tsconfig.json
diff --git a/e2e/cases/typescript/extension-alias/index.test.ts b/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);
+});
diff --git a/e2e/cases/typescript/extension-alias/src/bar.tsx b/e2e/cases/typescript/extension-alias/src/bar.tsx
@@ -0,0 +1,3 @@
+export const bar = () => {
+  return <div>bar</div>;
+};
diff --git a/e2e/cases/typescript/extension-alias/src/foo.ts b/e2e/cases/typescript/extension-alias/src/foo.ts
@@ -0,0 +1 @@
+export const foo = 1;
diff --git a/e2e/cases/typescript/extension-alias/src/index.ts b/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);
diff --git a/e2e/cases/typescript/extension-alias/tsconfig.json b/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"]
+}
diff --git a/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap b/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap
@@ -333,6 +333,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",
@@ -698,6 +705,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
     "alias": {
       "@swc/helpers": "<ROOT>/node_modules/<PNPM_INNER>/@swc/helpers",
     },
+    "extensionAlias": {
+      ".js": [
+        ".ts",
+        ".tsx",
+        ".js",
+      ],
+    },
     "extensions": [
       ".ts",
       ".tsx",
@@ -1012,6 +1026,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",
@@ -1309,6 +1330,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",
diff --git a/packages/core/src/plugins/resolve.ts b/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,
diff --git a/packages/core/tests/__snapshots__/default.test.ts.snap b/packages/core/tests/__snapshots__/default.test.ts.snap
@@ -380,6 +380,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",
@@ -816,6 +823,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",
@@ -1150,6 +1164,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",
@@ -1562,6 +1583,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",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const bar = () => {`
	`2`	`+ return <div>bar</div>;`
	`3`	`+};`