바벨을 적용하니까 에러가 나면서 라이크버튼이 적용되지 않습니다.

<slot name="insertion-point-sidebar" style="box-sizing:border-box;min-width:0px;min-height:0px"> <div class="vbox flex-auto tabbed-pane drawer-tabbed-pane" slot="insertion-point-sidebar" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;position:relative;flex-direction:column !important;flex:1 1 auto"> <div class="widget vbox tabbed-pane-shadow" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;flex:1 1 auto;contain:style;display:flex;flex-direction:column !important"> <div class="tabbed-pane-header" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;flex:0 0 27px;border-bottom:1px solid #3d3d3d;overflow:visible;width:720px;cursor:ns-resize"> <div class="tabbed-pane-left-toolbar toolbar" style="flex:0 0 auto;padding:0px 2px;--accent-color:#4688f1;box-sizing:border-box;min-width:0px;min-height:0px;margin-right:-4px"> <div class="toolbar-shadow" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;white-space:nowrap;height:26px;overflow:hidden;z-index:12;display:flex;flex:0 0 auto;align-items:center"><button class="toolbar-button toolbar-item toolbar-has-glyph" aria-label="More Tools" role="button" aria-haspopup="true" style="min-width:28px;min-height:0px;font-family:inherit;font-size:inherit;position:relative;display:flex;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:26px;color:#e6e6e6;overflow:hidden;border-radius:0px;cursor:pointer;border:initial none initial"><span is="ui-icon" class="toolbar-glyph spritesheet-largeicons largeicon-menu icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:0 0 auto;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/largeIcons.svg');--spritesheet-position:-56px 96px;width:28px;height:24px"></span></button><slot style="box-sizing:border-box;min-width:0px;min-height:0px"></slot></div> </div> <div class="tabbed-pane-header-contents" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:1 1 auto;pointer-events:none;margin-left:0px;position:relative"> <div class="tabbed-pane-header-tabs" role="tablist" style="box-sizing:border-box;min-width:0px;min-height:0px;pointer-events:initial"> <div class="tabbed-pane-header-tab selected" id="tab-console-view" role="tab" aria-selected="true" aria-label="Console" tabindex="0" style="box-sizing:border-box;min-width:0px;min-height:0px;float:left;padding:2px 0.8em;height:26px;line-height:15px;white-space:nowrap;cursor:pointer;display:flex;align-items:center;color:var(--tab-selected-fg-color);border-bottom:none;width:64px"><span class="tabbed-pane-header-tab-title" style="box-sizing:border-box;min-width:0px;min-height:0px;text-overflow:ellipsis;overflow:hidden">Console</span></div> <div class="tabbed-pane-header-tab closeable" id="tab-release-note" role="tab" aria-selected="false" aria-label="What's New" style="box-sizing:border-box;min-width:0px;min-height:0px;float:left;padding:2px 4px 2px 0.8em;height:26px;line-height:15px;white-space:nowrap;cursor:pointer;display:flex;align-items:center;color:#e6e6e6;width:94px"><span class="tabbed-pane-header-tab-title" style="box-sizing:border-box;min-width:0px;min-height:0px;text-overflow:ellipsis;overflow:hidden">What's New</span> <div is="dt-close-button" class="tabbed-pane-close-button" style="box-sizing:border-box;min-width:0px;min-height:0px;margin:0px -3px 0px 4px;visibility:hidden"> <div class="close-button" aria-label="Close What's New" role="button" style="box-sizing:border-box;min-width:0px;min-height:0px;width:14px;height:14px;cursor:default;display:flex;align-items:center;justify-content:center"><span is="ui-icon" class="default-icon spritesheet-smallicons smallicon-cross" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex-shrink:0;background-position:var(--spritesheet-position);background-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:-20px 70px;width:10px;height:10px"></span></div> </div> </div> <div class="tabbed-pane-header-tab closeable" id="tab-issues-pane" role="tab" aria-selected="false" aria-label="Issues" style="box-sizing:border-box;min-width:0px;min-height:0px;float:left;padding:2px 4px 2px 0.8em;height:26px;line-height:15px;white-space:nowrap;cursor:pointer;display:flex;align-items:center;color:#e6e6e6;width:63px"><span class="tabbed-pane-header-tab-title" style="box-sizing:border-box;min-width:0px;min-height:0px;text-overflow:ellipsis;overflow:hidden">Issues</span> <div is="dt-close-button" class="tabbed-pane-close-button" style="box-sizing:border-box;min-width:0px;min-height:0px;margin:0px -3px 0px 4px;visibility:hidden"> <div class="close-button" aria-label="Close Issues" role="button" style="box-sizing:border-box;min-width:0px;min-height:0px;width:14px;height:14px;cursor:default;display:flex;align-items:center;justify-content:center"><span is="ui-icon" class="default-icon spritesheet-smallicons smallicon-cross" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex-shrink:0;background-position:var(--spritesheet-position);background-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:-20px 70px;width:10px;height:10px"></span></div> </div> </div> </div> </div> <div class="tabbed-pane-right-toolbar toolbar" style="flex:0 0 auto;padding:0px 2px;--accent-color:#4688f1;box-sizing:border-box;min-width:0px;min-height:0px;margin-left:-4px"> <div class="toolbar-shadow" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;white-space:nowrap;height:26px;overflow:hidden;z-index:12;display:flex;flex:0 0 auto;align-items:center"><button class="toolbar-button toolbar-item toolbar-has-glyph" aria-label="Close drawer" style="min-width:28px;min-height:0px;font-family:inherit;font-size:inherit;position:relative;display:flex;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:26px;color:#e6e6e6;overflow:hidden;border-radius:0px;cursor:pointer;border:initial none initial"><span is="ui-icon" class="toolbar-glyph spritesheet-largeicons largeicon-delete icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:0 0 auto;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/largeIcons.svg');--spritesheet-position:-84px 216px;width:28px;height:24px"></span></button><slot style="box-sizing:border-box;min-width:0px;min-height:0px"></slot></div> </div> </div> <div class="tabbed-pane-content" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;overflow:auto;flex:1 1 auto;display:flex;flex-direction:column"><slot style="box-sizing:border-box;min-width:0px;min-height:0px"> <div class="widget vbox flex-auto view-container overflow-auto" tabindex="-1" role="tabpanel" aria-label="Console panel" style="box-sizing:border-box;min-width:0px;min-height:0px;outline-width:0px;position:relative;flex:1 1 auto;contain:style;display:flex;flex-direction:column !important;overflow:auto"> <div class="widget vbox console-view-wrapper" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;flex:1 1 auto;contain:style;display:flex;flex-direction:column !important;background-color:#2c2c2c"> <div class="widget vbox console-view" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;flex:1 1 auto;contain:style;display:flex;flex-direction:column !important;background-color:#242424;overflow:hidden;--message-border-color:rgb(58 58 58);--warning-border-color:rgb(102 85 0);--error-border-color:rgb(92 0 0);--error-text-color:hsl(0deg 100% 75%)"> <div class="console-toolbar-container" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;flex:0 0 auto"> <div class="console-main-toolbar toolbar" style="flex:1 1 auto;padding:0px 2px;--accent-color:#4688f1;box-sizing:border-box;min-width:0px;min-height:0px;background-color:var(--toolbar-bg-color);border-bottom:var(--divider-border)"> <div class="toolbar-shadow" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;white-space:nowrap;height:26px;overflow:hidden;z-index:12;display:flex;flex:0 0 auto;align-items:center"><button class="toolbar-button toolbar-item toolbar-has-glyph" aria-label="Show console sidebar" style="min-width:28px;min-height:0px;font-family:inherit;font-size:inherit;position:relative;display:flex;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:26px;color:#e6e6e6;overflow:hidden;border-radius:0px;cursor:pointer;border:initial none initial"><span is="ui-icon" class="toolbar-glyph spritesheet-largeicons largeicon-show-left-sidebar icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:0 0 auto;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/largeIcons.svg');--spritesheet-position:-168px 120px;width:28px;height:24px"></span></button><button class="toolbar-button toolbar-item toolbar-has-glyph" aria-label="Clear console" style="min-width:28px;min-height:0px;font-family:inherit;font-size:inherit;position:relative;display:flex;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:26px;color:#e6e6e6;overflow:hidden;border-radius:0px;cursor:pointer;border:initial none initial"><span is="ui-icon" class="toolbar-glyph spritesheet-largeicons largeicon-clear icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:0 0 auto;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/largeIcons.svg');--spritesheet-position:0px 144px;width:28px;height:24px"></span></button> <div class="toolbar-divider toolbar-item" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;display:flex;background-color:#3d3d3d;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:16px;border:none;white-space:pre;color:#e6e6e6;width:1px;margin:5px 4px"></div> <button class="soft-dropdown toolbar-item toolbar-has-dropdown" aria-expanded="false" aria-label="JavaScript context: top" style="min-width:0px;min-height:0px;font-family:inherit;font-size:inherit;position:relative;display:flex;background-image:none;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;flex:0 0 auto;align-items:center;justify-content:space-between;padding:0px 3px 0px 5px;height:26px;white-space:pre;color:#e6e6e6;text-align:left;border:initial none initial"><span class="title" style="box-sizing:border-box;min-width:0px;min-height:0px;padding-right:5px;width:120px;overflow:hidden;text-overflow:ellipsis">top</span><span is="ui-icon" class="spritesheet-smallicons smallicon-triangle-down icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex-shrink:0;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:-80px 30px;width:10px;height:10px"></span></button> <div class="toolbar-divider toolbar-item" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;display:flex;background-color:#3d3d3d;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:16px;border:none;white-space:pre;color:#e6e6e6;width:1px;margin:5px 4px"></div> <button class="toolbar-button toolbar-item toolbar-has-glyph" aria-label="Create live expression" style="min-width:28px;min-height:0px;font-family:inherit;font-size:inherit;position:relative;display:flex;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:26px;color:#e6e6e6;overflow:hidden;border-radius:0px;cursor:pointer;border:initial none initial"><span is="ui-icon" class="toolbar-glyph spritesheet-largeicons largeicon-visibility icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:0 0 auto;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/largeIcons.svg');--spritesheet-position:-196px 216px;width:28px;height:24px"></span></button> <div class="toolbar-divider toolbar-item" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;display:flex;background-color:#3d3d3d;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:16px;border:none;white-space:pre;color:#e6e6e6;width:1px;margin:5px 4px"></div> <div class="toolbar-input toolbar-item toolbar-input-empty" style="box-sizing:border-box;min-width:35px;min-height:0px;position:relative;display:flex;flex:0.2 1 auto;align-items:center;justify-content:center;padding:4px 3px 3px;height:19px;border:1px solid transparent;white-space:pre;color:#e6e6e6;width:120px;margin:1px 3px;box-shadow:var(--focus-ring-inactive-shadow)"> <div class="text-prompt-root" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;align-items:center"> <div class="toolbar-input-prompt text-prompt" aria-hidden="true" role="textbox" contenteditable="plaintext-only" data-placeholder="Filter" aria-placeholder="Filter" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:1 1 0%;overflow:visible hidden;white-space:nowrap;cursor:text"></div> </div> </div> <div class="toolbar-text" style="box-sizing:border-box;min-width:0px;min-height:0px;margin:0px 4px 0px 0px;flex:1 1 auto;text-overflow:ellipsis;overflow:hidden;text-align:right">Default levels</div> <div class="toolbar-item" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;display:flex;background-color:transparent;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:26px;border:none;white-space:pre;color:#e6e6e6"></div> <slot style="box-sizing:border-box;min-width:0px;min-height:0px"></slot></div> </div> <div class="toolbar" style="flex:0 0 auto;padding:0px 2px;--accent-color:#4688f1;box-sizing:border-box;min-width:0px;min-height:0px;background-color:var(--toolbar-bg-color);border-bottom:var(--divider-border)"> <div class="toolbar-shadow" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;white-space:nowrap;height:26px;overflow:hidden;z-index:12;display:flex;flex:0 0 auto;align-items:center"> <div class="toolbar-divider toolbar-item" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;display:flex;background-color:#3d3d3d;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:16px;border:none;white-space:pre;color:#e6e6e6;width:1px;margin:5px 4px"></div> <button class="toolbar-button toolbar-item toolbar-has-glyph toolbar-state-off" aria-label="Console settings" aria-pressed="false" style="min-width:28px;min-height:0px;font-family:inherit;font-size:inherit;position:relative;display:flex;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;flex:0 0 auto;align-items:center;justify-content:center;padding:0px;height:26px;color:#e6e6e6;overflow:hidden;border-radius:0px;cursor:pointer;border:initial none initial"><span is="ui-icon" class="toolbar-glyph spritesheet-largeicons largeicon-settings-gear icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:0 0 auto;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/largeIcons.svg');--spritesheet-position:-168px 168px;width:28px;height:24px"></span></button><slot style="box-sizing:border-box;min-width:0px;min-height:0px"></slot></div> </div> </div> <div class="vbox flex-auto split-widget" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;position:relative;flex-direction:column !important;flex:1 1 auto"> <div class="widget shadow-split-widget hbox" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;flex:1 1 auto;contain:style;display:flex;flex-direction:row !important;overflow:hidden"> <div class="shadow-split-widget-contents shadow-split-widget-main vbox maximized" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;position:relative;flex-direction:column;contain:size layout style;flex:1 1 auto"><slot name="insertion-point-main" style="box-sizing:border-box;min-width:0px;min-height:0px"> <div class="vbox flex-auto console-searchable-view" slot="insertion-point-main" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;position:relative;flex-direction:column !important;flex:1 1 auto;max-height:100%"> <div class="widget vbox" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;flex:1 1 auto;contain:style;display:flex;flex-direction:column !important"><slot style="box-sizing:border-box;min-width:0px;min-height:0px"> <div class="vbox flex-auto console-view-pinpane" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;position:relative;flex-direction:column !important;flex:0 0 auto;max-height:50%"> <div class="widget vbox console-pins monospace" style="box-sizing:border-box;min-width:0px;min-height:0px;font-family:Menlo, monospace;font-size:11px !important;position:relative;flex:1 1 auto;contain:style;display:flex;flex-direction:column !important;max-height:200px;overflow-y:auto;background:var(--toolbar-bg-color);--error-background-color:hsl(0deg 100% 8%);--error-border-color:rgb(92 0 0);--error-text-color:hsl(0deg 100% 75%)"></div> </div> <div id="console-messages" class="monospace" role="group" style="box-sizing:border-box;min-width:0px;min-height:0px;font-family:Menlo, monospace;font-size:11px !important;flex:1 1 0%;overflow:auto;overflow-wrap:break-word;user-select:text;transform:translateZ(0px);overflow-anchor:none"> <div aria-hidden="true" style="box-sizing:border-box;min-width:0px;min-height:0px;height:0px;color:transparent"></div> <div tabindex="0" class="console-group console-group-messages" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative"> <div class="flex-none console-message-wrapper" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:0 0 auto;display:flex;border-top-color:transparent;border-bottom:1px solid transparent"> <div class="infobar infobar-issue" aria-label="Some messages have been moved to the Issues panel." style="box-sizing:border-box;min-width:0px;min-height:0px;color:#f6f7f8;display:flex;flex:1 1 auto;border:none;flex-direction:column;position:relative;padding:3px 6px 1px;background-color:transparent;line-height:1.2"> <div class="infobar-main-row" style="box-sizing:border-box;min-width:0px;min-height:17px;display:flex;flex-direction:row;justify-content:flex-start"> <div class="infobar-info-container" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;align-items:center;flex-grow:1;flex-wrap:wrap"> <div class="infobar-info-message" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;margin:0px 1px;flex:1 0 0%"><span is="ui-icon" class="icon spritesheet-smallicons smallicon-issue-blue-text" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex-shrink:0;-webkit-mask-size:18px 18px;width:10px;height:10px;background-position:var(--spritesheet-position);background-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');margin-top:1px;--spritesheet-position:-120px 30px"></span> <div class="infobar-info-text" role="alert" aria-live="polite" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;align-items:center;margin:0px 7px">Some messages have been moved to the Issues panel.</div> </div> <div class="infobar-info-actions" style="box-sizing:border-box;min-width:0px;min-height:0px"><button class="infobar-button text-button" type="button" style="min-width:0px;min-height:0px;font-family:inherit;font-size:inherit;margin:0px;height:auto;border-radius:4px;padding:0px 22px 0px 0px;color:#e9e9e9;flex:0 0 auto;white-space:nowrap;cursor:pointer;text-decoration-line:underline;border:initial none initial">View issues</button></div> </div> </div> </div> </div> <div tabindex="-1" class="console-message-wrapper console-from-api console-info-level" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;border-top:1px solid var(--message-border-color);border-bottom:1px solid transparent"> <div class="console-message" style="box-sizing:border-box;min-width:0px;min-height:17px;clear:right;position:relative;padding:3px 22px 1px 0px;margin-left:24px;flex:1 1 auto;display:flex"><span class="source-code" style="box-sizing:border-box;min-width:0px;min-height:0px;white-space:pre-wrap;flex:1 1 auto;line-height:1.2"><span class="console-message-anchor" style="box-sizing:border-box;min-width:0px;min-height:0px;float:right;text-align:right;max-width:100%;margin-left:4px"><span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">index.html:95</span> </span><span class="console-message-text" style="box-sizing:border-box;min-width:0px;min-height:0px">Live reload enabled.</span></span></div> </div> <div tabindex="-1" class="console-message-wrapper console-from-api console-warning-level" role="treeitem" aria-expanded="false" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;border-top-color:var(--warning-border-color);border-bottom:1px solid transparent;background-color:#332b00"> <div class="console-message" style="box-sizing:border-box;min-width:0px;min-height:17px;clear:right;position:relative;padding:3px 22px 1px 0px;margin-left:24px;flex:1 1 auto;display:flex"><span is="ui-icon" class="message-level-icon spritesheet-smallicons smallicon-warning" aria-label="Warning" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:1 1 auto;position:absolute;left:-17px;top:4px;user-select:none;background-position:var(--spritesheet-position);background-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:-60px 10px;width:10px;height:10px"></span> <div class="console-message-stack-trace-toggle" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:1 1 auto;display:flex;flex-direction:row;align-items:flex-start"> <div class="console-message-stack-trace-wrapper" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch"> <div tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:0 0 auto"><span is="ui-icon" class="console-message-expand-icon spritesheet-smallicons smallicon-triangle-right icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex-shrink:0;margin-bottom:-2px;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:0px 10px;width:10px;height:10px"></span><span class="source-code" style="box-sizing:border-box;min-width:0px;min-height:0px;white-space:pre-wrap;line-height:1.2"><span class="console-message-anchor" style="box-sizing:border-box;min-width:0px;min-height:0px;float:right;text-align:right;max-width:100%;margin-left:4px"><span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">babel.min.js:1</span> </span><span class="console-message-text" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#fffdfa">You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - <span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">https://babeljs.io/docs/setup/</span></span></span></div> </div> </div> </div> </div> <div tabindex="-1" class="console-message-wrapper console-from-api console-error-level" role="treeitem" aria-expanded="false" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;border-top-color:var(--error-border-color);border-bottom:1px solid transparent;background-color:#290000"> <div class="console-message" style="box-sizing:border-box;min-width:0px;min-height:17px;clear:right;position:relative;padding:3px 22px 1px 0px;margin-left:24px;flex:1 1 auto;display:flex"><span is="ui-icon" class="message-level-icon spritesheet-smallicons smallicon-error" aria-label="Error" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:1 1 auto;position:absolute;left:-17px;top:4px;user-select:none;background-position:var(--spritesheet-position);background-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:-40px 70px;width:10px;height:10px"></span> <div class="console-message-stack-trace-toggle" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:1 1 auto;display:flex;flex-direction:row;align-items:flex-start"> <div class="console-message-stack-trace-wrapper" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch"> <div tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:0 0 auto"><span is="ui-icon" class="console-message-expand-icon spritesheet-smallicons smallicon-triangle-right icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex-shrink:0;margin-bottom:-2px;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:0px 10px;width:10px;height:10px"></span><span class="source-code" style="box-sizing:border-box;min-width:0px;min-height:0px;white-space:pre-wrap;line-height:1.2"><span class="console-message-anchor" style="box-sizing:border-box;min-width:0px;min-height:0px;float:right;text-align:right;max-width:100%;margin-left:4px"><span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:82</span> </span><span class="console-message-text" style="box-sizing:border-box;min-width:0px;min-height:0px;color:var(--error-text-color) !important">Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. in LikeButton in div</span></span></div> </div> </div> </div> </div> <div tabindex="-1" class="console-message-wrapper console-from-api console-error-level" role="treeitem" aria-expanded="false" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;border-top-color:var(--error-border-color);border-bottom:1px solid transparent;background-color:#290000"> <div class="console-message" style="box-sizing:border-box;min-width:0px;min-height:17px;clear:right;position:relative;padding:3px 22px 1px 0px;margin-left:24px;flex:1 1 auto;display:flex"><span is="ui-icon" class="message-level-icon spritesheet-smallicons smallicon-error" aria-label="Error" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:1 1 auto;position:absolute;left:-17px;top:4px;user-select:none;background-position:var(--spritesheet-position);background-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:-40px 70px;width:10px;height:10px"></span> <div class="console-message-stack-trace-toggle" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:1 1 auto;display:flex;flex-direction:row;align-items:flex-start"> <div class="console-message-stack-trace-wrapper" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch"> <div tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;flex:0 0 auto"><span is="ui-icon" class="console-message-expand-icon spritesheet-smallicons smallicon-triangle-right icon-mask" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex-shrink:0;margin-bottom:-2px;background-color:#919191;-webkit-mask-position:var(--spritesheet-position);-webkit-mask-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:0px 10px;width:10px;height:10px"></span><span class="source-code" style="box-sizing:border-box;min-width:0px;min-height:0px;white-space:pre-wrap;line-height:1.2"><span class="console-message-anchor" style="box-sizing:border-box;min-width:0px;min-height:0px;float:right;text-align:right;max-width:100%;margin-left:4px"><span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:19662</span> </span><span class="console-message-text" style="box-sizing:border-box;min-width:0px;min-height:0px;color:var(--error-text-color) !important">The above error occurred in the <LikeButton> component: in LikeButton in div Consider adding an error boundary to your tree to customize error handling behavior. Visit <span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">https://fb.me/react-error-boundaries</span> to learn more about error boundaries.</span></span></div> </div> </div> </div> </div> <div tabindex="-1" class="console-message-wrapper console-error-level" style="box-sizing:border-box;min-width:0px;min-height:0px;display:flex;border-top-color:var(--error-border-color);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--error-border-color);background-color:#290000"> <div class="console-message" style="box-sizing:border-box;min-width:0px;min-height:17px;clear:right;position:relative;padding:3px 22px 1px 0px;margin-left:24px;flex:1 1 auto;display:flex"><span is="ui-icon" class="message-level-icon spritesheet-smallicons smallicon-error" aria-label="Error" style="box-sizing:border-box;min-width:0px;min-height:0px;display:inline-block;flex:1 1 auto;position:absolute;left:-17px;top:4px;user-select:none;background-position:var(--spritesheet-position);background-image:url('https://www.inflearn.com/course/web-game-React/lecture/Images/smallIcons.svg');--spritesheet-position:-40px 70px;width:10px;height:10px"></span><span class="source-code" style="box-sizing:border-box;min-width:0px;min-height:0px;white-space:pre-wrap;flex:1 1 auto;line-height:1.2"><span class="console-message-anchor" style="box-sizing:border-box;min-width:0px;min-height:0px;float:right;text-align:right;max-width:100%;margin-left:4px"><span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:11237</span> </span><span class="console-message-text" style="box-sizing:border-box;min-width:0px;min-height:0px;color:var(--error-text-color) !important">Uncaught <span class="object-value-error source-code" style="box-sizing:border-box;min-width:0px;min-height:0px;line-height:1.2"><span style="box-sizing:border-box;min-width:0px;min-height:0px">Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates (<span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:23228</span>) at scheduleUpdateOnFiber (<span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:21299</span>) at Object.enqueueSetState (<span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:12774</span>) at LikeButton.Component.setState (<span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react.development.js:557</span>) at LikeButton.render (<anonymous>:49:23) at finishClassComponent (<span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:17295</span>) at updateClassComponent (<span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:17245</span>) at beginWork (<span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:18755</span>) at beginWork$1 (<span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:23314</span>) at performUnitOfWork (<span class="devtools-link" role="link" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;color:#e9e9e9;text-decoration-line:underline;cursor:pointer;word-break:break-all">react-dom.development.js:22289</span>)</span></span></span></span></div> </div> </div> <div aria-hidden="true" style="box-sizing:border-box;min-width:0px;min-height:0px;height:0px;color:transparent"></div> <div class="source-code" id="console-prompt" style="box-sizing:border-box;min-width:0px;min-height:0px;white-space:pre-wrap;clear:right;position:relative;margin:0px 22px 0px 20px"> <div class="widget" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;flex:1 1 auto;contain:style"> <div class="console-prompt-editor-container" style="box-sizing:border-box;min-width:0px;min-height:21px;color:#f6f7f8"> <div class="widget vbox" tabindex="-1" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;flex:1 1 auto;contain:style;display:flex;flex-direction:column !important;overflow:hidden"> <div class="CodeMirror cm-s-default CodeMirror-wrap source-code fill" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;inset:0px;overflow:hidden;background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-attachment:initial;background-origin:initial;background-clip:initial;color:#ffffff;height:auto;padding:3px 0px 1px;width:678px;background-color:transparent !important;line-height:1.2em !important"> <div style="box-sizing:border-box;min-width:0px;min-height:0px;overflow:hidden;position:relative;width:3px;height:0px;top:3px;left:4px"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" aria-label="Console prompt" tabindex="0" style="box-sizing:border-box;min-width:0px;min-height:0px;resize:none;overflow:hidden;position:absolute;bottom:-1em;padding:0px;width:1000px;height:1em;outline:none"></textarea></div> <div class="CodeMirror-scroll" tabindex="-1" style="box-sizing:content-box;min-width:0px;min-height:0px;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:3px;outline:none;position:relative;overflow:scroll !important"> <div class="CodeMirror-sizer" style="box-sizing:content-box;min-width:0px;min-height:17px;position:relative;border-right:36px solid transparent;margin-left:0px;margin-bottom:-14px;padding-right:0px;padding-bottom:0px"> <div style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;top:0px"> <div class="CodeMirror-lines" role="presentation" style="box-sizing:border-box;min-width:0px;min-height:1px;cursor:text;padding:0px 0px 4px"> <div role="presentation" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;outline:none"> <div class="CodeMirror-measure" style="box-sizing:border-box;min-width:0px;min-height:0px;position:absolute;width:678px;height:0px;overflow:hidden;visibility:hidden"></div> <div class="CodeMirror-measure" style="box-sizing:border-box;min-width:0px;min-height:0px;position:absolute;width:678px;height:0px;overflow:hidden;visibility:hidden"></div> <div style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative;z-index:1"></div> <div class="CodeMirror-cursors" style="box-sizing:border-box;min-width:0px;min-height:0px;visibility:hidden;position:relative;z-index:3"> <div class="CodeMirror-cursor" style="box-sizing:border-box;min-width:0px;min-height:0px;position:absolute;pointer-events:none;border-left:1px solid #e6e6e6;border-right:none;width:0px;left:4px;top:0px;height:13px"></div> </div> <div class="CodeMirror-code" role="presentation" style="box-sizing:border-box;min-width:0px;min-height:0px;outline:none"> <div class="CodeMirror-activeline" style="box-sizing:border-box;min-width:0px;min-height:0px;position:relative"> <div class="CodeMirror-activeline-background CodeMirror-linebackground" style="box-sizing:border-box;min-width:0px;min-height:0px;position:absolute;inset:0px;z-index:0"></div> <div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="box-sizing:border-box;min-width:0px;min-height:0px;position:absolute;top:0px;bottom:0px;z-index:4;left:0px;width:0px"></div> <pre class=" CodeMirror-line " role="presentation" style="box-sizing:border-box;min-width:0px;min-height:0px;padding:0px 4px;border-radius:0px;border-width:0px;background:transparent;font-family:inherit;font-size:inherit;margin-top:0px;margin-bottom:0px;white-space:pre-wrap;overflow-wrap:break-word;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;font-variant-ligatures:contextual;word-break:normal"><span role="presentation" style="box-sizing:border-box;min-width:0px;min-height:0px;padding-right:0.1px"><span cm-text style="box-sizing:border-box;min-width:0px;min-height:0px">​</span></span></pre> </div> </div> </div> </div> </div> </div> <div style="box-sizing:border-box;min-width:0px;min-height:0px;position:absolute;height:36px;width:1px;border-bottom:0px solid transparent;top:17px"></div> </div> </div> </div> </div> <div class="console-eager-preview" style="box-sizing:border-box;min-width:0px;min-height:0px;padding-bottom:2px;opacity:0.6;position:relative;height:15px;color:#f6f7f8"></div> </div> </div> </div> </slot></div> </div> </slot></div> </div> </div> </div> </div> </div> </slot></div> </div> </div> </slot>