diff --git a/site/commerce-config.js b/site/commerce-config.js
index 96b939c00..4f431354c 100644
--- a/site/commerce-config.js
+++ b/site/commerce-config.js
@@ -66,10 +66,10 @@ function withCommerceConfig(nextConfig = {}) {
     // -> /node_modules/[name]/dist/index.js
     const absolutePath = require.resolve(provider)
     // but we want references to go to the real path in /packages instead
-    // -> packages/[name]/dist/index.js
-    const relativePath = path.relative(process.cwd(), absolutePath)
+    // -> packages/[name]/dist
+    const distPath = path.join(path.relative(process.cwd(), absolutePath), '..')
     // -> /packages/[name]/src
-    const modulePath = path.join(relativePath, '../../src')
+    const modulePath = path.join(distPath, '../src')
 
     tsconfig.compilerOptions.paths['@framework'] = [`${modulePath}`]
     tsconfig.compilerOptions.paths['@framework/*'] = [`${modulePath}/*`]
@@ -78,6 +78,25 @@ function withCommerceConfig(nextConfig = {}) {
       tsconfigPath,
       prettier.format(JSON.stringify(tsconfig), { parser: 'json' })
     )
+
+    const webpack = config.webpack
+
+    // To improve the DX of using references, we'll switch from `src` to `dist`
+    // only for webpack so imports resolve correctly but typechecking goes to `src`
+    config.webpack = (cfg, options) => {
+      if (Array.isArray(cfg.resolve.plugins)) {
+        const jsconfigPaths = cfg.resolve.plugins.find(
+          (plugin) => plugin.constructor.name === 'JsConfigPathsPlugin'
+        )
+
+        if (jsconfigPaths) {
+          jsconfigPaths.paths['@framework'] = [distPath]
+          jsconfigPaths.paths['@framework/*'] = [`${distPath}/*`]
+        }
+      }
+
+      return webpack ? webpack(cfg, options) : cfg
+    }
   }
 
   return core.withCommerceConfig(config)
diff --git a/site/components/wishlist/WishlistCard/WishlistCard.tsx b/site/components/wishlist/WishlistCard/WishlistCard.tsx
index ee1403bf4..dc7a95482 100644
--- a/site/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/site/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -11,7 +11,7 @@ import type { Product } from '@commerce/types/product'
 import usePrice from '@framework/product/use-price'
 import useAddItem from '@framework/cart/use-add-item'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
-import { Wishlist } from '@commerce/types/wishlist'
+import type { Wishlist } from '@commerce/types/wishlist'
 
 interface Props {
   item: Wishlist
diff --git a/site/tsconfig.json b/site/tsconfig.json
index d80d4bdbc..eb45b6ae3 100644
--- a/site/tsconfig.json
+++ b/site/tsconfig.json
@@ -21,8 +21,8 @@
       "@config/*": ["config/*"],
       "@assets/*": ["assets/*"],
       "@components/*": ["components/*"],
-      "@commerce": ["framework/commerce"],
-      "@commerce/*": ["framework/commerce/*"],
+      "@commerce": ["../packages/commerce/src"],
+      "@commerce/*": ["../packages/commerce/src/*"],
       "@framework": ["../packages/local/src"],
       "@framework/*": ["../packages/local/src/*"]
     }