diff --git a/examples/typescript/src/components/Alert.mdx b/examples/typescript/src/components/Alert.mdx
index 010ece500..3a9fafd0d 100644
--- a/examples/typescript/src/components/Alert.mdx
+++ b/examples/typescript/src/components/Alert.mdx
@@ -4,7 +4,7 @@ menu: Components
 ---
 
 import { Playground, PropsTable } from 'docz'
-import Alert from './Alert.tsx'
+import Alert from './Alert'
 
 # Alert
 
diff --git a/packages/docz-core/src/bundlers/webpack/config.ts b/packages/docz-core/src/bundlers/webpack/config.ts
index e0c0771c7..2d0d43039 100644
--- a/packages/docz-core/src/bundlers/webpack/config.ts
+++ b/packages/docz-core/src/bundlers/webpack/config.ts
@@ -126,19 +126,30 @@ export const createConfig = (babelrc: BabelRC) => (
       path.dirname(require.resolve('@babel/runtime/package.json'))
     )
 
-  config.resolve.extensions
-    .merge([
-      '.web.js',
-      '.mjs',
-      '.js',
-      '.json',
-      '.web.jsx',
-      '.jsx',
-      '.mdx',
-      ...(args.typescript ? ['.ts', '.tsx'] : []),
-    ])
-    .end()
-    .modules.add('node_modules')
+  const addExtensions = (resolve: any) => {
+    resolve.extensions
+      .add('.web.js')
+      .add('.mjs')
+      .add('.js')
+      .add('.json')
+      .add('.web.jsx')
+      .add('.jsx')
+      .add('.mdx')
+      .end()
+
+    if (args.typescript) {
+      resolve.extensions
+        .prepend('.ts')
+        .prepend('.tsx')
+        .end()
+    }
+  }
+
+  addExtensions(config.resolve)
+  addExtensions(config.resolveLoader)
+
+  config.resolve.modules
+    .add('node_modules')
     .add(srcPath)
     .add(paths.root)