diff --git a/packages/ui-default/components/discussion/comments.page.tsx b/packages/ui-default/components/discussion/comments.page.tsx
index f723f3a67..d447f63d1 100644
--- a/packages/ui-default/components/discussion/comments.page.tsx
+++ b/packages/ui-default/components/discussion/comments.page.tsx
@@ -6,6 +6,7 @@ import { Popover } from '@blueprintjs/core';
 import { AutoloadPage } from 'vj/misc/Page';
 import CommentBox from 'vj/components/discussion/CommentBox';
 import { ConfirmDialog } from 'vj/components/dialog';
+import Notification from 'vj/components/notification';
 
 import delay from 'vj/utils/delay';
 import { slideDown, slideUp } from 'vj/utils/slide';
@@ -254,10 +255,15 @@ const commentsPage = new AutoloadPage('commentsPage', () => {
   $(document).on('click', '[data-op="delete"][data-type="comment"]', onCommentClickDeleteComment);
   $(document).on('click', '[data-op="delete"][data-type="reply"]', onCommentClickDeleteReply);
 
+  const canUseReaction = $('[data-op="react"]').length > 0;
   $('[data-op="react"]').each((i, e) => {
     ReactDOM.render(<Reaction payload={$(e).data('form')} ele={$(e).closest('.media__body').find('.reactions')} />, e);
   });
   $(document).on('click', '.reaction', async (e) => {
+    if (!canUseReaction) {
+      (window as any).showSignInDialog();
+      return;
+    }
     const target = $(e.currentTarget);
     const res = await request.post('', {
       operation: 'reaction',
diff --git a/packages/ui-default/misc/Page.ts b/packages/ui-default/misc/Page.ts
index eba669153..5e6da1e8a 100644
--- a/packages/ui-default/misc/Page.ts
+++ b/packages/ui-default/misc/Page.ts
@@ -5,8 +5,8 @@ export class Page {
   autoload = false;
   afterLoading?: callback;
   beforeLoading?: callback;
-  constructor(pagename: string | string[], afterLoading: callback, beforeLoading: callback);
-  constructor(pagename: string | string[], moduleName: string, afterLoading: callback, beforeLoading: callback);
+  constructor(pagename: string | string[], afterLoading?: callback, beforeLoading?: callback);
+  constructor(pagename: string | string[], moduleName: string, afterLoading?: callback, beforeLoading?: callback);
   constructor(pagename: string | string[], ...args: any[]);
   constructor(public name: string | string[], ...args: any[]) {
     if (typeof args[0] === 'string') {
@@ -40,8 +40,8 @@ export class Page {
 export class NamedPage extends Page { }
 
 export class AutoloadPage extends Page {
-  constructor(pagename: string | string[], afterLoading: callback, beforeLoading: callback);
-  constructor(pagename: string | string[], moduleName: string, afterLoading: callback, beforeLoading: callback);
+  constructor(pagename: string | string[], afterLoading?: callback, beforeLoading?: callback);
+  constructor(pagename: string | string[], moduleName: string, afterLoading?: callback, beforeLoading?: callback);
   constructor(pagename: string | string[], ...args: any[]) {
     super(pagename, ...args);
     this.autoload = true;
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index 82d0daae7..5c5e5a6e5 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.34.14",
+  "version": "4.34.15",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",