diff --git a/apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx b/apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx
index dbf8a616a2..b191e93dc4 100644
--- a/apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx
+++ b/apps/web/src/components/blocksuite/header/editor-mode-switch/switch-items.tsx
@@ -1,8 +1,6 @@
 import React, { cloneElement, HTMLAttributes, useState } from 'react';
 import Lottie from 'react-lottie';
 
-import * as edgelessHoverAnimationData from './animation-data/edgeless-hover.json';
-import * as pageHoverAnimationData from './animation-data/page-hover.json';
 import { StyledSwitchItem } from './style';
 
 type HoverAnimateControllerProps = {
@@ -49,7 +47,7 @@ export const PageSwitchItem = (
         options={{
           loop: false,
           autoplay: false,
-          animationData: pageHoverAnimationData,
+          animationData: require('./animation-data/page-hover.json'),
           rendererSettings: {
             preserveAspectRatio: 'xMidYMid slice',
           },
@@ -68,7 +66,7 @@ export const EdgelessSwitchItem = (
         options={{
           loop: false,
           autoplay: false,
-          animationData: edgelessHoverAnimationData,
+          animationData: require('./animation-data/edgeless-hover.json'),
           rendererSettings: {
             preserveAspectRatio: 'xMidYMid slice',
           },