fix: resolve dynamic import aliases in template literals

Fixes #520

Previously, Webpack failed to resolve Nuxt aliases (e.g., `~`, `@`) within dynamic `import()` statements that used template literals (e.g., `~/components/${component}.vue`).

This commit introduces the use of Webpack's `NormalModuleReplacementPlugin` to intercept and correctly resolve these aliased paths before Webpack processes them, ensuring proper module resolution during the build process.

Author: Seu Nome

.gitignore

@@ -28,3 +28,6 @@ coverage
 .DS_Store
 .AppleDouble
 .LSOverride
+
+GEMINI.md
+commit_message.txt

babel.config.js

@@ -11,6 +11,9 @@ module.exports = function (api) {
             node: 'current'
           }
         }]
+      ],
+      plugins: [
+        '@babel/plugin-transform-runtime'
       ]
     }
   }

examples/class-api/minimal/pages/index.vue

@@ -9,7 +9,6 @@ import { Component, Vue } from 'vue-property-decorator'
 
 @Component
 export default class PageIndex extends Vue {
-  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
   message: string = 'This is a message'
 }
 </script>

examples/options-api/minimal/pages/index.vue

@@ -9,7 +9,6 @@ import { defineComponent } from 'vue'
 
 export default defineComponent({
   data () {
-    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
     const message: string = 'This is a message'
 
     return {

packages/typescript-build/src/index.ts

@@ -6,6 +6,7 @@ import type { Options as TsLoaderOptions } from 'ts-loader'
 import type { ForkTsCheckerWebpackPluginOptions as TsCheckerOptions } from 'fork-ts-checker-webpack-plugin/lib/ForkTsCheckerWebpackPluginOptions'
 import type TsCheckerLogger from 'fork-ts-checker-webpack-plugin/lib/logger/Logger'
 import type { RuleSetUseItem } from 'webpack'
+import { NormalModuleReplacementPlugin } from 'webpack'
 
 export interface Options {
   ignoreNotFoundWarnings?: boolean
@@ -53,23 +54,35 @@ const tsModule: Module<Options> = function (moduleOptions) {
     const jsxRuleLoaders = config.module!.rules.find(r => (r.test as RegExp).test('.jsx'))!.use as RuleSetUseItem[]
     const babelLoader = jsxRuleLoaders[jsxRuleLoaders.length - 1]
 
-    config.module!.rules.push(...(['ts', 'tsx'] as const).map(ext =>
-      ({
-        test: new RegExp(`\\.${ext}$`, 'i'),
-        use: [
-          babelLoader,
-          {
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: true,
-              appendTsxSuffixTo: ext === 'tsx' ? [/\.vue$/] : [],
-              ...(options.loaders && options.loaders[ext])
-            }
+    config.module!.rules.push(...(['ts', 'tsx'] as const).map(ext => ({
+      test: new RegExp(`\\.${ext}$`),
+      use: [
+        babelLoader,
+        {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+            appendTsxSuffixTo: ext === 'tsx' ? [/.vue$/] : [],
+            ...(options.loaders && options.loaders[ext])
           }
-        ]
-      })
+        }
+      ]
+    })
     ))
-
+    // Fix paths not resolving in async imports
+    // https://github.com/nuxt/typescript/issues/520
+    if (this.nuxt.options.alias) {
+      const aliases = Object.keys(this.nuxt.options.alias)
+      config.plugins!.push(new NormalModuleReplacementPlugin(
+        new RegExp(aliases.join('|')),
+        (resource: any) => {
+          const alias = aliases.find(alias => resource.request.startsWith(alias))
+          if (alias) {
+            resource.request = resource.request.replace(alias, this.nuxt.options.alias[alias])
+          }
+        }
+      ))
+    }
     if (options.typeCheck && isClient && !isModern) {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

packages/typescript-build/test/fixture/pages/about.ts

@@ -3,7 +3,6 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'About',
   render (h) {
-    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
     const text: string = 'About Page'
     return h('div', text)
   }

packages/typescript-build/test/fixture/pages/contact.tsx

@@ -3,7 +3,6 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'Contact',
   data () {
-    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
     const text: string = 'Contact Page'
     return { text }
   },

packages/typescript-build/test/fixture/pages/index.vue

@@ -7,7 +7,6 @@ import { defineComponent } from 'vue'
 
 export default defineComponent({
   data () {
-    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
     const text: string = 'Index Page'
     return { text }
   }