diff --git a/packages/frontend/component/.storybook/main.ts b/packages/frontend/component/.storybook/main.ts
index fc7474abde..4d1f4b1620 100644
--- a/packages/frontend/component/.storybook/main.ts
+++ b/packages/frontend/component/.storybook/main.ts
@@ -3,7 +3,6 @@ import { StorybookConfig } from '@storybook/react-vite';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import swc from 'unplugin-swc';
 import { mergeConfig } from 'vite';
-import { getBuildConfig } from '@affine-tools/utils/build-config';
 
 export default {
   stories: ['../src/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
@@ -26,6 +25,9 @@ export default {
   docs: {},
 
   async viteFinal(config, _options) {
+    const { getBuildConfig } = await import('@affine-tools/utils/build-config');
+    const { Package } = await import('@affine-tools/utils/workspace');
+
     return mergeConfig(config, {
       plugins: [
         vanillaExtractPlugin(),
@@ -55,12 +57,9 @@ export default {
       define: {
         'process.env.CAPTCHA_SITE_KEY': `"${process.env.CAPTCHA_SITE_KEY}"`,
         ...Object.entries(
-          getBuildConfig({
-            distribution: 'web',
+          getBuildConfig(new Package('@affine/web'), {
             mode: 'development',
             channel: 'canary',
-            static: false,
-            coverage: false,
           })
         ).reduce((envs, [key, value]) => {
           envs[`BUILD_CONFIG.${key}`] = JSON.stringify(value);
diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index 8cf43311bb..00977f0ec8 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@affine/component",
   "private": true,
+  "type": "module",
   "main": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
@@ -64,6 +65,7 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@affine-tools/utils": "workspace:*",
     "@blocksuite/affine": "workspace:*",
     "@blocksuite/icons": "2.2.2",
     "@chromatic-com/storybook": "^3.2.2",
diff --git a/packages/frontend/component/tsconfig.json b/packages/frontend/component/tsconfig.json
index 9d2d1396c3..2288d091e3 100644
--- a/packages/frontend/component/tsconfig.json
+++ b/packages/frontend/component/tsconfig.json
@@ -16,6 +16,7 @@
     { "path": "../electron-api" },
     { "path": "../graphql" },
     { "path": "../i18n" },
+    { "path": "../../../tools/utils" },
     { "path": "../../../blocksuite/affine/all" }
   ]
 }
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 6dd6308e05..ea14803769 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -609,6 +609,7 @@ export const PackageList = [
       'packages/frontend/electron-api',
       'packages/frontend/graphql',
       'packages/frontend/i18n',
+      'tools/utils',
       'blocksuite/affine/all',
     ],
   },
diff --git a/yarn.lock b/yarn.lock
index 4ce087bba5..6ce0761898 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -270,6 +270,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@affine/component@workspace:packages/frontend/component"
   dependencies:
+    "@affine-tools/utils": "workspace:*"
     "@affine/debug": "workspace:*"
     "@affine/electron-api": "workspace:*"
     "@affine/graphql": "workspace:*"