diff --git a/.eslintrc.js b/.eslintrc.js
index a7ec440e36..46ed530687 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -35,7 +35,6 @@ module.exports = {
     'no-empty': 'off',
     'no-func-assign': 'off',
     'no-cond-assign': 'off',
-    'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-empty-function': 'off',
diff --git a/apps/desktop/src/preload/components/enable-workspace-modal/index.tsx b/apps/desktop/src/preload/components/enable-workspace-modal/index.tsx
index 422290db49..ce058d3fc7 100644
--- a/apps/desktop/src/preload/components/enable-workspace-modal/index.tsx
+++ b/apps/desktop/src/preload/components/enable-workspace-modal/index.tsx
@@ -5,11 +5,11 @@ import { useTranslation } from '@affine/i18n';
 import { CloseIcon } from '@blocksuite/icons';
 import router from 'next/router';
 import { useCallback, useState } from 'react';
+import React from 'react';
 
 import { useGlobalState } from '@/store/app';
 
 import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
-
 interface EnableWorkspaceModalProps {
   open: boolean;
   onClose: () => void;
diff --git a/apps/desktop/src/preload/components/icons/index.tsx b/apps/desktop/src/preload/components/icons/index.tsx
index 681d03616b..ed4267da18 100644
--- a/apps/desktop/src/preload/components/icons/index.tsx
+++ b/apps/desktop/src/preload/components/icons/index.tsx
@@ -5,7 +5,7 @@ import {
   LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
   PublishIcon as DefaultPublishIcon,
 } from '@blocksuite/icons';
-
+import React from 'react';
 // Here are some icons with special color or size
 
 export const JoinedWorkspaceIcon = () => {
diff --git a/package.json b/package.json
index 206094e0c9..f2d99159a4 100644
--- a/package.json
+++ b/package.json
@@ -53,39 +53,6 @@
     "typescript": "^4.9.5",
     "vitest": "^0.28.5"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:prettier/recommended"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-      "project": [
-        "./tsconfig.json"
-      ]
-    },
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "rules": {
-      "prettier/prettier": "warn"
-    },
-    "reportUnusedDisableDirectives": true,
-    "ignorePatterns": [
-      "package/**/dist/*",
-      "package/**/.babelrc.js",
-      "package/**/sync.js",
-      "src/**/*.test.ts",
-      "**/webpack.config.js",
-      "**/scripts/*.js",
-      "**/node_modules/**",
-      ".github/**",
-      "**/__tests__/**",
-      "**/tests/**"
-    ]
-  },
   "pnpm": {
     "patchedDependencies": {
       "@tauri-apps/api@1.2.0": "patches/@tauri-apps__api@1.2.0.patch",
diff --git a/packages/component/src/components/BlockSuiteEditor.tsx b/packages/component/src/components/BlockSuiteEditor.tsx
index 2547ce13a2..b5d214dea5 100644
--- a/packages/component/src/components/BlockSuiteEditor.tsx
+++ b/packages/component/src/components/BlockSuiteEditor.tsx
@@ -1,5 +1,5 @@
 import { Editor, EditorProps } from '@blocksuite/react/editor';
-
+import React from 'react';
 export type BlockSuiteEditorProps = EditorProps;
 export const BlockSuiteEditor = (props: BlockSuiteEditorProps) => {
   return <Editor {...props} />;
diff --git a/packages/component/src/styles/styled.tsx b/packages/component/src/styles/styled.tsx
index ade405c725..8f49ce848c 100644
--- a/packages/component/src/styles/styled.tsx
+++ b/packages/component/src/styles/styled.tsx
@@ -1,6 +1,7 @@
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import emotionStyled from '@emotion/styled';
 import type { PropsWithChildren } from 'react';
+import React from 'react';
 
 import { AffineTheme } from './types';
 export { css, keyframes } from '@emotion/react';
diff --git a/packages/component/src/ui/button/Button.tsx b/packages/component/src/ui/button/Button.tsx
index 7a085036b4..04023057fa 100644
--- a/packages/component/src/ui/button/Button.tsx
+++ b/packages/component/src/ui/button/Button.tsx
@@ -1,10 +1,10 @@
 import { Children, cloneElement, forwardRef } from 'react';
+import React from 'react';
 
 import { ButtonProps } from './interface';
 import { Loading } from './Loading';
 import { StyledButton } from './styles';
 import { getSize } from './utils';
-
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
diff --git a/packages/component/src/ui/button/IconButton.tsx b/packages/component/src/ui/button/IconButton.tsx
index 3611dc2cbe..4f0daf149c 100644
--- a/packages/component/src/ui/button/IconButton.tsx
+++ b/packages/component/src/ui/button/IconButton.tsx
@@ -6,9 +6,9 @@ import {
   HTMLAttributes,
   ReactElement,
 } from 'react';
+import React from 'react';
 
 import { StyledIconButton } from './styles';
-
 const SIZE_SMALL = 'small' as const;
 const SIZE_MIDDLE = 'middle' as const;
 const SIZE_NORMAL = 'normal' as const;
diff --git a/packages/component/src/ui/button/Loading.tsx b/packages/component/src/ui/button/Loading.tsx
index 60a7c996c4..7d6d654be1 100644
--- a/packages/component/src/ui/button/Loading.tsx
+++ b/packages/component/src/ui/button/Loading.tsx
@@ -1,7 +1,8 @@
+import React from 'react';
+
 import { styled } from '../../styles';
 import { ButtonProps } from './interface';
 import { getButtonColors } from './utils';
-
 export const LoadingContainer = styled('div')<Pick<ButtonProps, 'type'>>(
   ({ theme, type = 'default' }) => {
     const { color } = getButtonColors(theme, type, false);
diff --git a/packages/component/src/ui/button/TextButton.tsx b/packages/component/src/ui/button/TextButton.tsx
index b7cac00415..64037c02cf 100644
--- a/packages/component/src/ui/button/TextButton.tsx
+++ b/packages/component/src/ui/button/TextButton.tsx
@@ -1,9 +1,9 @@
 import { Children, cloneElement, forwardRef } from 'react';
+import React from 'react';
 
 import { ButtonProps } from './interface';
 import { StyledTextButton } from './styles';
 import { getSize } from './utils';
-
 export const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
diff --git a/packages/component/src/ui/confirm/Confirm.tsx b/packages/component/src/ui/confirm/Confirm.tsx
index 75a5488d06..2728620674 100644
--- a/packages/component/src/ui/confirm/Confirm.tsx
+++ b/packages/component/src/ui/confirm/Confirm.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from '@affine/i18n';
 import { useState } from 'react';
+import React from 'react';
 
 import { Button } from '../button';
 import { Modal, ModalCloseButton, ModalProps } from '../modal';
diff --git a/packages/component/src/ui/empty/Empty.tsx b/packages/component/src/ui/empty/Empty.tsx
index 7309b25595..1dbfb8d4a2 100644
--- a/packages/component/src/ui/empty/Empty.tsx
+++ b/packages/component/src/ui/empty/Empty.tsx
@@ -1,8 +1,8 @@
 import { CSSProperties } from 'react';
+import React from 'react';
 
 import { EmptySVG } from './EmptySVG';
 import { StyledEmptyContainer } from './style';
-
 export type EmptyContentProps = {
   imageStyle?: CSSProperties;
   description?: string;
diff --git a/packages/component/src/ui/empty/EmptySVG.tsx b/packages/component/src/ui/empty/EmptySVG.tsx
index a6a0fce58e..943e6af640 100644
--- a/packages/component/src/ui/empty/EmptySVG.tsx
+++ b/packages/component/src/ui/empty/EmptySVG.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import React from 'react';
 
 export const EmptySVG = (props: SvgIconProps) => {
   return (
diff --git a/packages/component/src/ui/input/Input.tsx b/packages/component/src/ui/input/Input.tsx
index 32df1c1add..ea9b2981c5 100644
--- a/packages/component/src/ui/input/Input.tsx
+++ b/packages/component/src/ui/input/Input.tsx
@@ -6,9 +6,9 @@ import {
   useEffect,
   useState,
 } from 'react';
+import React from 'react';
 
 import { StyledInput } from './style';
-
 type inputProps = {
   value?: string;
   placeholder?: string;
diff --git a/packages/component/src/ui/menu/Menu.tsx b/packages/component/src/ui/menu/Menu.tsx
index c9bd531d59..fbf40a4307 100644
--- a/packages/component/src/ui/menu/Menu.tsx
+++ b/packages/component/src/ui/menu/Menu.tsx
@@ -1,8 +1,8 @@
 import { TooltipProps } from '@mui/material';
+import React from 'react';
 
 import { Popper, type PopperProps } from '../popper';
 import { StyledMenuWrapper } from './styles';
-
 export const Menu = (props: PopperProps & Omit<TooltipProps, 'title'>) => {
   const { content, placement = 'bottom-start', children } = props;
   return content ? (
diff --git a/packages/component/src/ui/menu/MenuItem.tsx b/packages/component/src/ui/menu/MenuItem.tsx
index b23a0d79bf..bb5783c5e4 100644
--- a/packages/component/src/ui/menu/MenuItem.tsx
+++ b/packages/component/src/ui/menu/MenuItem.tsx
@@ -5,9 +5,9 @@ import {
   PropsWithChildren,
   ReactElement,
 } from 'react';
+import React from 'react';
 
 import { StyledArrow, StyledMenuItem } from './styles';
-
 export type IconMenuProps = PropsWithChildren<{
   isDir?: boolean;
   icon?: ReactElement;
diff --git a/packages/component/src/ui/modal/Modal.tsx b/packages/component/src/ui/modal/Modal.tsx
index 72d20a5869..3dba76ea30 100644
--- a/packages/component/src/ui/modal/Modal.tsx
+++ b/packages/component/src/ui/modal/Modal.tsx
@@ -1,8 +1,8 @@
 import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
 import Fade from '@mui/material/Fade';
+import React from 'react';
 
 import { StyledBackdrop, StyledModal } from './styles';
-
 const Backdrop = ({
   open,
   ...other
diff --git a/packages/component/src/ui/modal/ModalCloseButton.tsx b/packages/component/src/ui/modal/ModalCloseButton.tsx
index 9890c8ad7d..8f1ace1329 100644
--- a/packages/component/src/ui/modal/ModalCloseButton.tsx
+++ b/packages/component/src/ui/modal/ModalCloseButton.tsx
@@ -1,5 +1,6 @@
 import { CloseIcon } from '@blocksuite/icons';
 import { HTMLAttributes } from 'react';
+import React from 'react';
 
 import { styled } from '../../styles';
 import { IconButton, IconButtonProps } from '../button/IconButton';
diff --git a/packages/component/src/ui/popper/PopoverArrow.tsx b/packages/component/src/ui/popper/PopoverArrow.tsx
index 1f49d5da52..f65253104a 100644
--- a/packages/component/src/ui/popper/PopoverArrow.tsx
+++ b/packages/component/src/ui/popper/PopoverArrow.tsx
@@ -1,4 +1,5 @@
 import { forwardRef } from 'react';
+import React from 'react';
 
 import { styled } from '../../styles';
 import { PopperArrowProps } from './interface';
diff --git a/packages/component/src/ui/popper/Popper.tsx b/packages/component/src/ui/popper/Popper.tsx
index 01791dfe8a..b6e9760592 100644
--- a/packages/component/src/ui/popper/Popper.tsx
+++ b/packages/component/src/ui/popper/Popper.tsx
@@ -9,6 +9,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import React from 'react';
 
 import { styled } from '../../styles';
 import { PopperProps, VirtualElement } from './interface';
diff --git a/packages/component/src/ui/table/Table.tsx b/packages/component/src/ui/table/Table.tsx
index def2a31cea..a9f892fc70 100644
--- a/packages/component/src/ui/table/Table.tsx
+++ b/packages/component/src/ui/table/Table.tsx
@@ -1,7 +1,7 @@
 import { Children, HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import React from 'react';
 
 import { StyledTable } from './styles';
-
 const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => {
   return Children.toArray(children).some(child => {
     if (typeof child === 'object' && 'props' in child) {
diff --git a/packages/component/src/ui/table/TableBody.tsx b/packages/component/src/ui/table/TableBody.tsx
index 112723d8df..c6bb9e425e 100644
--- a/packages/component/src/ui/table/TableBody.tsx
+++ b/packages/component/src/ui/table/TableBody.tsx
@@ -1,7 +1,7 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
 
 import { StyledTableBody } from './styles';
-
 export const TableBody = ({
   children,
   ...props
diff --git a/packages/component/src/ui/table/TableCell.tsx b/packages/component/src/ui/table/TableCell.tsx
index b592770576..e9c788f770 100644
--- a/packages/component/src/ui/table/TableCell.tsx
+++ b/packages/component/src/ui/table/TableCell.tsx
@@ -1,8 +1,8 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
 
 import { TableCellProps } from './interface';
 import { StyledTableCell } from './styles';
-
 export const TableCell = ({
   children,
   ...props
diff --git a/packages/component/src/ui/table/TableHead.tsx b/packages/component/src/ui/table/TableHead.tsx
index c2cf83d01a..1a284094f0 100644
--- a/packages/component/src/ui/table/TableHead.tsx
+++ b/packages/component/src/ui/table/TableHead.tsx
@@ -1,4 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
 
 import { StyledTableHead } from './styles';
 
diff --git a/packages/component/src/ui/table/TableRow.tsx b/packages/component/src/ui/table/TableRow.tsx
index 55b9608794..7b8559c0e0 100644
--- a/packages/component/src/ui/table/TableRow.tsx
+++ b/packages/component/src/ui/table/TableRow.tsx
@@ -1,7 +1,7 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+import React from 'react';
 
 import { StyledTableRow } from './styles';
-
 export const TableRow = ({
   children,
   ...props
diff --git a/packages/component/src/ui/tooltip/Tooltip.tsx b/packages/component/src/ui/tooltip/Tooltip.tsx
index 9af7c31be8..2f4b54560d 100644
--- a/packages/component/src/ui/tooltip/Tooltip.tsx
+++ b/packages/component/src/ui/tooltip/Tooltip.tsx
@@ -1,9 +1,9 @@
 import type { TooltipProps } from '@mui/material';
+import React from 'react';
 
 import { styled } from '../../styles';
 import { Popper, type PopperProps } from '../popper';
 import StyledPopperContainer from '../shared/Container';
-
 const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     maxWidth: '320px',
diff --git a/packages/logger/pages/index.tsx b/packages/logger/pages/index.tsx
index 5e3f2d3581..b9a0c9da75 100644
--- a/packages/logger/pages/index.tsx
+++ b/packages/logger/pages/index.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Logger } from '../src';
 
diff --git a/tests/console.spec.ts b/tests/console.spec.ts
index 4114dccfc9..b0cf7b9a4f 100644
--- a/tests/console.spec.ts
+++ b/tests/console.spec.ts
@@ -9,6 +9,13 @@ const pkgPath = path.join(__dirname, '../apps/web/package.json');
 const record = fs.readFileSync(pkgPath, 'utf8');
 const temp = JSON.parse(record);
 loadPage();
+
+declare global {
+  interface Window {
+    __editoVersion: unknown;
+  }
+}
+
 test.describe('web console', () => {
   test('editor version', async ({ page }) => {
     const pkgEditorVersion = temp.dependencies['@blocksuite/editor'];