Merge pull request #18038 from bisubus/fix-vue3-tsx

Vue3: Add support for TSX in single file components
storybookjs · May 17, 2022 · ebf9341 · ebf9341
2 parents 1b396fd + 97b199e
commit ebf9341
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/app/vue3/src/server/framework-preset-vue3.ts b/app/vue3/src/server/framework-preset-vue3.ts
@@ -24,7 +24,7 @@ export function webpack(config: Configuration): Configuration {
           options: {},
         },
         {
-          test: /\.tsx?$/,
+          test: /\.ts$/,
           use: [
             {
               loader: require.resolve('ts-loader'),
@@ -35,6 +35,19 @@ export function webpack(config: Configuration): Configuration {
             },
           ],
         },
+        {
+          test: /\.tsx$/,
+          use: [
+            {
+              loader: require.resolve('ts-loader'),
+              options: {
+                transpileOnly: true,
+                // Note this is different from the `appendTsSuffixTo` above!
+                appendTsxSuffixTo: [/\.vue$/],
+              },
+            },
+          ],
+        },
       ],
     },
     resolve: {

diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
@@ -208,7 +208,7 @@ Object {
         "test": "/\\\\.vue$/",
       },
       Object {
-        "test": "/\\\\.tsx?$/",
+        "test": "/\\\\.ts$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/ts-loader/index.js",
@@ -221,6 +221,20 @@ Object {
           },
         ],
       },
+      Object {
+        "test": "/\\\\.tsx$/",
+        "use": Array [
+          Object {
+            "loader": "NODE_MODULES/ts-loader/index.js",
+            "options": Object {
+              "appendTsxSuffixTo": Array [
+                "/\\\\.vue$/",
+              ],
+              "transpileOnly": true,
+            },
+          },
+        ],
+      },
       Object {
         "include": "NODE_MODULES\\\\/acorn-jsx/",
         "test": "/\\\\.js$/",

diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
@@ -207,7 +207,7 @@ Object {
         "test": "/\\\\.vue$/",
       },
       Object {
-        "test": "/\\\\.tsx?$/",
+        "test": "/\\\\.ts$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/ts-loader/index.js",
@@ -220,6 +220,20 @@ Object {
           },
         ],
       },
+      Object {
+        "test": "/\\\\.tsx$/",
+        "use": Array [
+          Object {
+            "loader": "NODE_MODULES/ts-loader/index.js",
+            "options": Object {
+              "appendTsxSuffixTo": Array [
+                "/\\\\.vue$/",
+              ],
+              "transpileOnly": true,
+            },
+          },
+        ],
+      },
       Object {
         "include": "NODE_MODULES\\\\/acorn-jsx/",
         "test": "/\\\\.js$/",