feat: allow to import TSX files with .jsx extension (#3900)

web-infra-dev · Nov 5, 2024 · 29d0b3e · 29d0b3e
1 parent 00917ab
commit 29d0b3e
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 0 deletions.
diff --git a/.../typescript/extension-alias/index.test.ts → ...pescript/extension-alias-js/index.test.ts b/.../typescript/extension-alias/index.test.ts → ...pescript/extension-alias-js/index.test.ts
diff --git a/...es/typescript/extension-alias/src/bar.tsx → ...typescript/extension-alias-js/src/bar.tsx b/...es/typescript/extension-alias/src/bar.tsx → ...typescript/extension-alias-js/src/bar.tsx
diff --git a/...ses/typescript/extension-alias/src/foo.ts → .../typescript/extension-alias-js/src/foo.ts b/...ses/typescript/extension-alias/src/foo.ts → .../typescript/extension-alias-js/src/foo.ts
diff --git a/...s/typescript/extension-alias/src/index.ts → ...ypescript/extension-alias-js/src/index.ts b/...s/typescript/extension-alias/src/index.ts → ...ypescript/extension-alias-js/src/index.ts
diff --git a/.../typescript/extension-alias/tsconfig.json → ...pescript/extension-alias-js/tsconfig.json b/.../typescript/extension-alias/tsconfig.json → ...pescript/extension-alias-js/tsconfig.json
diff --git a/e2e/cases/typescript/extension-alias-jsx/index.test.ts b/e2e/cases/typescript/extension-alias-jsx/index.test.ts
@@ -0,0 +1,12 @@
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+test('should allow to import TSX files with .jsx extension', async ({
+  page,
+}) => {
+  await build({
+    cwd: __dirname,
+    page,
+  });
+  expect(await page.evaluate(() => window.test)).toBe(1);
+});
diff --git a/e2e/cases/typescript/extension-alias-jsx/src/bar.tsx b/e2e/cases/typescript/extension-alias-jsx/src/bar.tsx
@@ -0,0 +1,3 @@
+export const bar = () => {
+  return <div>bar</div>;
+};
diff --git a/e2e/cases/typescript/extension-alias-jsx/src/foo.tsx b/e2e/cases/typescript/extension-alias-jsx/src/foo.tsx
@@ -0,0 +1 @@
+export const foo = 1;
diff --git a/e2e/cases/typescript/extension-alias-jsx/src/index.ts b/e2e/cases/typescript/extension-alias-jsx/src/index.ts
@@ -0,0 +1,12 @@
+import { bar } from './bar.jsx';
+import { foo } from './foo.jsx';
+
+declare global {
+  interface Window {
+    test: number;
+  }
+}
+
+window.test = foo;
+
+console.log(bar);
diff --git a/e2e/cases/typescript/extension-alias-jsx/tsconfig.json b/e2e/cases/typescript/extension-alias-jsx/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
@@ -339,6 +339,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
         ".tsx",
         ".js",
       ],
+      ".jsx": [
+        ".tsx",
+        ".jsx",
+      ],
     },
     "extensions": [
       ".ts",
@@ -711,6 +715,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
         ".tsx",
         ".js",
       ],
+      ".jsx": [
+        ".tsx",
+        ".jsx",
+      ],
     },
     "extensions": [
       ".ts",
@@ -1032,6 +1040,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
         ".tsx",
         ".js",
       ],
+      ".jsx": [
+        ".tsx",
+        ".jsx",
+      ],
     },
     "extensions": [
       ".ts",
@@ -1336,6 +1348,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
         ".tsx",
         ".js",
       ],
+      ".jsx": [
+        ".tsx",
+        ".jsx",
+      ],
     },
     "extensions": [
       ".ts",

diff --git a/packages/core/src/plugins/resolve.ts b/packages/core/src/plugins/resolve.ts
@@ -45,8 +45,10 @@ function applyExtensions({
 
   if (tsconfigPath) {
     // TypeScript allows importing TS files with `.js` extension
+    // See: https://github.com/microsoft/TypeScript/blob/c09e2ab4/src/compiler/moduleNameResolver.ts#L2151-L2168
     chain.resolve.extensionAlias.merge({
       '.js': ['.ts', '.tsx', '.js'],
+      '.jsx': ['.tsx', '.jsx'],
     });
   }
 }

diff --git a/packages/core/tests/__snapshots__/default.test.ts.snap b/packages/core/tests/__snapshots__/default.test.ts.snap
@@ -386,6 +386,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
         ".tsx",
         ".js",
       ],
+      ".jsx": [
+        ".tsx",
+        ".jsx",
+      ],
     },
     "extensions": [
       ".ts",
@@ -829,6 +833,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
         ".tsx",
         ".js",
       ],
+      ".jsx": [
+        ".tsx",
+        ".jsx",
+      ],
     },
     "extensions": [
       ".ts",
@@ -1170,6 +1178,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
         ".tsx",
         ".js",
       ],
+      ".jsx": [
+        ".tsx",
+        ".jsx",
+      ],
     },
     "extensions": [
       ".ts",
@@ -1589,6 +1601,10 @@ exports[`tools.rspack > should match snapshot 1`] = `
         ".tsx",
         ".js",
       ],
+      ".jsx": [
+        ".tsx",
+        ".jsx",
+      ],
     },
     "extensions": [
       ".ts",