apostrophe: 3.0: Intermittent error : [Vue warn]: Cannot find element: #apos-modals

The error: [Vue warn]: Cannot find element: #apos-modals shown in the below snapshot appears intermittently between page refreshes.

I have cloned the apostrophe-3 boilerplate following the apostrophe3 docs, removed the default markup from the templates and added jquery to the page.

Page source of the home url where the error occurs:


<!DOCTYPE html>
<html lang="en" >
  <head>
    
    
    

    <title>
  Home
  
</title>
    
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    

    
  




  </head>
  
  <body class=" apos-theme--primary-purple " data-apos-level='0' data-apos='{"modules":{"@apostrophecms/admin-bar":{"items":[{"name":"@apostrophecms/user","action":"@apostrophecms/user:manager","label":"Users","permission":{"action":"edit","type":"@apostrophecms/user"},"options":{}},{"name":"@apostrophecms/image","action":"@apostrophecms/image:manager","label":"Images","permission":{"action":"edit","type":"@apostrophecms/image"},"options":{}},{"name":"@apostrophecms/image-tag","action":"@apostrophecms/image-tag:manager","label":"Image Tags","permission":{"action":"edit","type":"@apostrophecms/image-tag"},"options":{}},{"name":"@apostrophecms/file","action":"@apostrophecms/file:manager","label":"Files","permission":{"action":"edit","type":"@apostrophecms/file"},"options":{}},{"name":"@apostrophecms/file-tag","action":"@apostrophecms/file-tag:manager","label":"File Tags","permission":{"action":"edit","type":"@apostrophecms/file-tag"},"options":{}}],"components":{"the":"TheAposAdminBar"},"openOnLoad":true,"openOnHomepageLoad":true,"closeDelay":3000,"context":{"_id":"ckiohubqr0005bkpnyymf3bhv","title":"Home","type":"@apostrophecms/home-page","_url":"/","slug":"/"},"contextId":"ckiohubqr0005bkpnyymf3bhv","htmlPageId":"ckiq0i07x004ue8pn1hdl5ply","contextEditorName":"@apostrophecms/page:editor","alias":"adminBar"},"@apostrophecms/notification":{"action":"/api/v1/@apostrophecms/notification","alias":"notification"},"@apostrophecms/login":{"action":"/api/v1/@apostrophecms/login","user":{"_id":"ckiohue7i000abkpndz4gqjnv","firstName":"admin","title":"admin","username":"admin"},"alias":"login"},"@apostrophecms/schema":{"components":{"fields":{"area":"AposInputArea","string":"AposInputString","slug":"AposInputSlug","boolean":"AposInputBoolean","checkboxes":"AposInputCheckboxes","select":"AposInputSelect","integer":"AposInputString","float":"AposInputString","email":"AposInputString","color":"AposInputColor","range":"AposInputRange","url":"AposInputString","date":"AposInputString","time":"AposInputString","password":"AposInputPassword","group":"AposInputGroup","array":"AposInputArray","object":"AposInputObject","relationship":"AposInputRelationship","relationshipReverse":false,"attachment":"AposInputAttachment","oembed":"AposInputOembed"}},"alias":"schema"},"@apostrophecms/doc":{"action":"/api/v1/@apostrophecms/doc","alias":"doc"},"@apostrophecms/version":{"action":"/api/v1/@apostrophecms/version","alias":"version"},"@apostrophecms/modal":{"modals":[{"itemName":"@apostrophecms/global:manager","componentName":"AposPiecesManager","props":{"moduleName":"@apostrophecms/global"}},{"itemName":"@apostrophecms/global:editor","componentName":"AposDocEditor","props":{"moduleName":"@apostrophecms/global"}},{"itemName":"@apostrophecms/page:manager","componentName":"AposPagesManager","props":{"moduleName":"@apostrophecms/page"}},{"itemName":"@apostrophecms/page:editor","componentName":"AposDocEditor","props":{"moduleName":"@apostrophecms/page"}},{"itemName":"@apostrophecms/user:manager","componentName":"AposPiecesManager","props":{"moduleName":"@apostrophecms/user"}},{"itemName":"@apostrophecms/user:editor","componentName":"AposDocEditor","props":{"moduleName":"@apostrophecms/user"}},{"itemName":"@apostrophecms/image:manager","componentName":"AposMediaManager","props":{"moduleName":"@apostrophecms/image"}},{"itemName":"@apostrophecms/image:editor","componentName":"AposDocEditor","props":{"moduleName":"@apostrophecms/image"}},{"itemName":"@apostrophecms/image-tag:manager","componentName":"AposPiecesManager","props":{"moduleName":"@apostrophecms/image-tag"}},{"itemName":"@apostrophecms/image-tag:editor","componentName":"AposDocEditor","props":{"moduleName":"@apostrophecms/image-tag"}},{"itemName":"@apostrophecms/file:manager","componentName":"AposPiecesManager","props":{"moduleName":"@apostrophecms/file"}},{"itemName":"@apostrophecms/file:editor","componentName":"AposDocEditor","props":{"moduleName":"@apostrophecms/file"}},{"itemName":"@apostrophecms/file-tag:manager","componentName":"AposPiecesManager","props":{"moduleName":"@apostrophecms/file-tag"}},{"itemName":"@apostrophecms/file-tag:editor","componentName":"AposDocEditor","props":{"moduleName":"@apostrophecms/file-tag"}}],"components":{"the":"TheAposModals","confirm":"AposModalConfirm"},"alias":"modal"},"@apostrophecms/attachment":{"action":"/api/v1/@apostrophecms/attachment","fileGroups":[{"name":"images","label":"Images","extensions":["gif","jpg","png"],"extensionMaps":{"jpeg":"jpg"},"image":true},{"name":"office","label":"Office","extensions":["txt","rtf","pdf","xls","ppt","doc","pptx","sldx","ppsx","potx","xlsx","xltx","csv","docx","dotx"],"extensionMaps":{},"image":false}],"name":"attachment","uploadsUrl":"/uploads","croppable":{"gif":true,"jpg":true,"png":true},"sized":{"gif":true,"jpg":true,"png":true},"alias":"attachment"},"@apostrophecms/oembed":{"action":"/api/v1/@apostrophecms/oembed","alias":"oembed"},"@apostrophecms/any-doc-type":{"name":"@apostrophecms/any-doc-type","action":"/api/v1/@apostrophecms/any-doc-type","schema":[{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"slug","type":"slug","label":"Slug","following":"title","required":true,"group":{"name":"utility"},"_id":"29cc3aee08a22c7b069370939c93c4eb"},{"name":"trash","type":"boolean","label":"Trash","contextual":true,"def":false,"group":{"name":"utility"},"_id":"dc499a0fefc4f1a4cc81587e35734484"},{"name":"visibility","type":"select","label":"Who can view this?","def":"public","required":true,"choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}],"group":{"name":"permissions","label":"Permissions","last":true},"_id":"97b78fe94e3742640944886e9a67f171"}]},"@apostrophecms/global":{"name":"@apostrophecms/global","label":"Global","pluralLabel":"Global","action":"/api/v1/@apostrophecms/global","schema":[],"filters":[{"name":"visibility","label":"Visibility","inputType":"radio","choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"},{"value":null,"label":"Any"}],"allowedInChooser":false,"def":true},{"name":"trash","label":"Trash","inputType":"radio","choices":[{"value":false,"label":"Live"},{"value":true,"label":"Trash"}],"allowedInChooser":false,"def":false,"required":true}],"columns":[{"name":"title","label":"Title"},{"name":"updatedAt","label":"Edited on"},{"name":"visibility","label":"Visibility"}],"batchOperations":[{"name":"trash","label":"Trash","inputType":"radio","unlessFilter":{"trash":true}},{"name":"rescue","label":"Rescue","unlessFilter":{"trash":false}}],"quickCreate":false,"components":{"insertModal":"AposDocEditor","managerModal":"AposPiecesManager"},"_id":"ckiohuboi0002bkpnimfq5eb7","alias":"global"},"@apostrophecms/polymorphic-type":{"name":"@apostrophecms/polymorphic","action":"/api/v1/@apostrophecms/polymorphic-type","schema":[{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"slug","type":"slug","label":"Slug","following":"title","required":true,"group":{"name":"utility"},"_id":"29cc3aee08a22c7b069370939c93c4eb"},{"name":"trash","type":"boolean","label":"Trash","contextual":true,"def":false,"group":{"name":"utility"},"_id":"dc499a0fefc4f1a4cc81587e35734484"},{"name":"visibility","type":"select","label":"Who can view this?","def":"public","required":true,"choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}],"group":{"name":"permissions","label":"Permissions","last":true},"_id":"97b78fe94e3742640944886e9a67f171"}]},"@apostrophecms/page":{"action":"/api/v1/@apostrophecms/page","label":"Page","pluralLabel":"Pages","components":{"insertModal":"AposDocEditor","managerModal":"AposPagesManager"},"page":{"title":"Home","slug":"/","_id":"ckiohubqr0005bkpnyymf3bhv","type":"@apostrophecms/home-page","_url":"/","ancestors":[]},"name":"@apostrophecms/page","quickCreate":true,"alias":"page"},"@apostrophecms/home-page":{"name":"@apostrophecms/home-page","label":"Home Page","action":"/api/v1/@apostrophecms/home-page","schema":[{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"main","type":"area","options":{"widgets":{"@apostrophecms/rich-text":{"toolbar":["styles","|","bold","italic","strike","link","|","bullet_list","ordered_list"],"styles":[{"tag":"p","label":"Paragraph (P)"},{"tag":"h3","label":"Heading 3 (H3)"},{"tag":"h4","label":"Heading 4 (H4)"}]},"@apostrophecms/image":{},"@apostrophecms/video":{}}},"group":{"name":"basics","label":"Basics"},"label":"Main","_id":"48bd41d0120a143082e962db5bd9ac25"},{"name":"slug","type":"slug","label":"Slug","required":true,"page":true,"following":"title","group":{"name":"utility"},"_id":"59ffb66aa916fb4541003ad46a49ab52"},{"name":"type","type":"select","label":"Type","required":true,"choices":[{"value":"default-page","label":"Default"},{"value":"@apostrophecms/home-page","label":"Home"}],"group":{"name":"utility"},"_id":"f30a526b60680a9fd84d2251f87a1ef6"},{"name":"orphan","type":"boolean","label":"Hide in Navigation","def":false,"group":{"name":"utility"},"_id":"88ef6252cb330cc8aa30c1dd6c9bd726"},{"name":"visibility","type":"select","label":"Who can view this?","def":"public","required":true,"choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}],"group":{"name":"permissions","label":"Permissions","last":true},"_id":"97b78fe94e3742640944886e9a67f171"}]},"@apostrophecms/trash":{"name":"@apostrophecms/trash","action":"/api/v1/@apostrophecms/trash","schema":[{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"slug","type":"slug","label":"Slug","required":true,"page":true,"following":"title","group":{"name":"utility"},"_id":"59ffb66aa916fb4541003ad46a49ab52"},{"name":"type","type":"select","label":"Type","required":true,"choices":[{"value":"default-page","label":"Default"},{"value":"@apostrophecms/home-page","label":"Home"}],"group":{"name":"utility"},"_id":"f30a526b60680a9fd84d2251f87a1ef6"},{"name":"orphan","type":"boolean","label":"Hide in Navigation","def":false,"group":{"name":"utility"},"_id":"88ef6252cb330cc8aa30c1dd6c9bd726"},{"name":"visibility","type":"select","label":"Who can view this?","def":"public","required":true,"choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}],"group":{"name":"permissions","label":"Permissions","last":true},"_id":"97b78fe94e3742640944886e9a67f171"}]},"@apostrophecms/search":{"name":"@apostrophecms/search","action":"/api/v1/@apostrophecms/search","schema":[{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"slug","type":"slug","label":"Slug","required":true,"page":true,"following":"title","group":{"name":"utility"},"_id":"59ffb66aa916fb4541003ad46a49ab52"},{"name":"type","type":"select","label":"Type","required":true,"choices":[{"value":"default-page","label":"Default"},{"value":"@apostrophecms/home-page","label":"Home"}],"group":{"name":"utility"},"_id":"f30a526b60680a9fd84d2251f87a1ef6"},{"name":"orphan","type":"boolean","label":"Hide in Navigation","def":false,"group":{"name":"utility"},"_id":"88ef6252cb330cc8aa30c1dd6c9bd726"},{"name":"visibility","type":"select","label":"Who can view this?","def":"public","required":true,"choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}],"group":{"name":"permissions","label":"Permissions","last":true},"_id":"97b78fe94e3742640944886e9a67f171"}],"alias":"search"},"@apostrophecms/any-page-type":{"name":"@apostrophecms/page","pluralLabel":"Pages","action":"/api/v1/@apostrophecms/any-page-type","schema":[{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"slug","type":"slug","label":"Slug","following":"title","required":true,"group":{"name":"utility"},"_id":"29cc3aee08a22c7b069370939c93c4eb"},{"name":"trash","type":"boolean","label":"Trash","contextual":true,"def":false,"group":{"name":"utility"},"_id":"dc499a0fefc4f1a4cc81587e35734484"},{"name":"visibility","type":"select","label":"Who can view this?","def":"public","required":true,"choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}],"group":{"name":"permissions","label":"Permissions","last":true},"_id":"97b78fe94e3742640944886e9a67f171"}]},"@apostrophecms/area":{"components":{"editor":"AposAreaEditor","widgets":{"@apostrophecms/rich-text":"AposRichTextWidget","@apostrophecms/html":"AposWidget","@apostrophecms/image":"AposWidget","@apostrophecms/video":"AposWidget"},"widgetEditors":{"@apostrophecms/rich-text":"AposRichTextWidgetEditor","@apostrophecms/html":"AposWidgetEditor","@apostrophecms/image":"AposWidgetEditor","@apostrophecms/video":"AposWidgetEditor"}},"widgetIsContextual":{"@apostrophecms/rich-text":true},"contextualWidgetDefaultData":{"@apostrophecms/rich-text":{"content":""}},"widgetManagers":{"@apostrophecms/rich-text":"@apostrophecms/rich-text-widget","@apostrophecms/html":"@apostrophecms/html-widget","@apostrophecms/image":"@apostrophecms/image-widget","@apostrophecms/video":"@apostrophecms/video-widget"},"action":"/api/v1/@apostrophecms/area","alias":"area"},"@apostrophecms/rich-text-widget":{"components":{"widgetEditor":"AposRichTextWidgetEditor","widget":"AposRichTextWidget"},"tools":{"styles":{"component":"AposTiptapStyles","label":"Styles"},"|":{"component":"AposTiptapDivider"},"bold":{"component":"AposTiptapButton","label":"Bold","icon":"format-bold-icon"},"italic":{"component":"AposTiptapButton","label":"Italic","icon":"format-italic-icon"},"horizontal_rule":{"component":"AposTiptapButton","label":"Horizontal Rule","icon":"minus-icon"},"link":{"component":"AposTiptapLink","label":"Link","icon":"link-icon"},"bullet_list":{"component":"AposTiptapButton","label":"Bulleted List","icon":"format-list-bulleted-icon"},"ordered_list":{"component":"AposTiptapButton","label":"Ordered List","icon":"format-list-numbered-icon"},"strike":{"component":"AposTiptapButton","label":"Strike","icon":"format-strikethrough-variant-icon"},"blockquote":{"component":"AposTiptapButton","label":"Blockquote","icon":"format-quote-close-icon"},"code_block":{"component":"AposTiptapButton","label":"Code Block","icon":"code-tags-icon"},"undo":{"component":"AposTiptapButton","label":"Undo","icon":"undo-icon"},"redo":{"component":"AposTiptapButton","label":"Redo","icon":"redo-icon"}},"name":"@apostrophecms/rich-text","label":"Rich Text","action":"/api/v1/@apostrophecms/rich-text-widget","schema":[],"contextual":true,"className":"bp-rich-text"},"@apostrophecms/html-widget":{"name":"@apostrophecms/html","label":"Raw HTML","action":"/api/v1/@apostrophecms/html-widget","schema":[{"name":"code","type":"string","label":"Raw HTML (Code)","textarea":true,"help":"Be careful when embedding third-party code, as it can break the website editing functionality. If a page becomes unusable, add \"?safe_mode=1\" to the URL to make it work temporarily without the problem code being rendered.","group":{"name":"ungrouped","label":"Ungrouped"},"_id":"6d14ba74dd851d3eead317311c6adf01"}],"className":false},"@apostrophecms/image-widget":{"name":"@apostrophecms/image","label":"Image","action":"/api/v1/@apostrophecms/image-widget","schema":[{"name":"_image","type":"relationship","label":"Image","max":1,"required":true,"withType":"@apostrophecms/image","group":{"name":"ungrouped","label":"Ungrouped"},"idsStorage":"imageIds","_id":"7c3b499b648493f5f16762b7539acf53"}],"className":"bp-image-widget"},"@apostrophecms/oembed-field":{"name":"oembed","action":"/api/v1/@apostrophecms/oembed-field","alias":"oembedFields"},"@apostrophecms/video-widget":{"name":"@apostrophecms/video","label":"Video","action":"/api/v1/@apostrophecms/video-widget","schema":[{"name":"video","type":"oembed","oembedType":"video","label":"Video URL","help":"Enter the URL for a media source you wish to embed (e.g., YouTube, Vimeo, or other hosted video URL).","required":true,"group":{"name":"ungrouped","label":"Ungrouped"},"_id":"d6e37049bac95fa59524d50042d063e4"}],"className":"bp-video-widget"},"@apostrophecms/user":{"name":"@apostrophecms/user","label":"User","pluralLabel":"Users","action":"/api/v1/@apostrophecms/user","schema":[{"name":"firstName","type":"string","label":"First Name","group":{"name":"basics","label":"Basics"},"_id":"ef72b6324da86db687e80065a04d7397"},{"name":"lastName","type":"string","label":"Last Name","group":{"name":"basics","label":"Basics"},"_id":"608d83e210ce180ed6afb370ea577d29"},{"name":"title","type":"string","label":"Full Name","following":["firstName","lastName"],"required":true,"group":{"name":"basics","label":"Basics"},"_id":"f293f5e525c4a7eec5dc3786f25e17c7"},{"name":"slug","type":"slug","label":"Slug","following":"title","required":true,"group":{"name":"basics","label":"Basics"},"prefix":"user-","_id":"0fb598ca2a1b3d284c3fbc9f385ce1a9"},{"name":"username","type":"string","label":"Username","required":true,"group":{"name":"utility"},"_id":"c80424197b3459aca45dc2672f6f1222"},{"name":"email","type":"string","label":"Email","group":{"name":"utility"},"_id":"2ad069d900d46059f67b410d0eaad873"},{"name":"password","type":"password","label":"Password","group":{"name":"utility"},"_id":"afb74060766fe3ae7a374e70ad10c321"},{"name":"trash","type":"boolean","label":"Trash","contextual":true,"def":false,"group":{"name":"utility"},"_id":"dc499a0fefc4f1a4cc81587e35734484"},{"name":"disabled","type":"boolean","label":"Login Disabled","def":false,"group":{"name":"permissions","label":"Permissions"},"_id":"e66f85dfa3fe3212f3ae97033820520f"}],"filters":[{"name":"trash","label":"Trash","inputType":"radio","choices":[{"value":false,"label":"Live"},{"value":true,"label":"Trash"}],"allowedInChooser":false,"def":false,"required":true}],"columns":[{"name":"title","label":"Title"},{"name":"updatedAt","label":"Edited on"}],"batchOperations":[{"name":"trash","label":"Trash","inputType":"radio","unlessFilter":{"trash":true}},{"name":"rescue","label":"Rescue","unlessFilter":{"trash":false}}],"quickCreate":false,"components":{"insertModal":"AposDocEditor","managerModal":"AposPiecesManager"},"alias":"user"},"@apostrophecms/image":{"name":"@apostrophecms/image","label":"Image","pluralLabel":"Images","action":"/api/v1/@apostrophecms/image","schema":[{"name":"attachment","type":"attachment","label":"Image File","fileGroup":"images","required":true,"group":{"name":"basics","label":"Basics"},"_id":"9878a650abacd5ea90bf988976913b7a","accept":".gif,.jpg,.png,.jpeg"},{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"alt","type":"string","label":"Alt Text","help":"Image description used for accessibility","group":{"name":"basics","label":"Basics"},"_id":"9cde7b59b3f53b5a0f22a12caa4b05ba"},{"name":"_tags","type":"relationship","label":"Tags","withType":"@apostrophecms/image-tag","group":{"name":"basics","label":"Basics"},"idsStorage":"tagsIds","_id":"43999955ff45523140816aa43c468480"},{"name":"credit","type":"string","label":"Credit","group":{"name":"basics","label":"Basics"},"_id":"26bf531fd175dcb22e9a31d9f99ac7f6"},{"name":"creditUrl","type":"url","label":"Credit URL","group":{"name":"basics","label":"Basics"},"_id":"e1393e987696a8f263ea607b3a60c708"},{"name":"visibility","type":"select","label":"Who can view this?","def":"public","required":true,"choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}],"group":{"name":"basics","label":"Basics"},"_id":"97b78fe94e3742640944886e9a67f171"},{"name":"slug","type":"slug","label":"Slug","prefix":"image-","required":true,"following":"title","group":{"name":"basics","label":"Basics"},"_id":"d23b2789bad2cc06effedc67ea905e36"},{"name":"trash","type":"boolean","label":"Trash","contextual":true,"def":false,"group":{"name":"basics","label":"Basics"},"_id":"dc499a0fefc4f1a4cc81587e35734484"}],"filters":[{"name":"visibility","label":"Visibility","inputType":"radio","choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"},{"value":null,"label":"Any"}],"allowedInChooser":false,"def":true},{"name":"trash","label":"Trash","inputType":"radio","choices":[{"value":false,"label":"Live"},{"value":true,"label":"Trash"}],"allowedInChooser":false,"def":false,"required":true},{"name":"_tags","label":"Tags","inputType":"select","nullLabel":"Choose One"}],"columns":[{"name":"title","label":"Title"},{"name":"updatedAt","label":"Edited on"},{"name":"visibility","label":"Visibility"}],"batchOperations":[{"name":"trash","label":"Trash","inputType":"radio","unlessFilter":{"trash":true}},{"name":"rescue","label":"Rescue","unlessFilter":{"trash":false}},{"name":"visibility","label":"Visibility","requiredField":"visibility","fields":{"add":{"visibility":{"type":"select","label":"Who can view this?","def":"public","choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}]}}}}],"insertViaUpload":true,"quickCreate":false,"components":{"insertModal":"AposDocEditor","managerModal":"AposMediaManager"},"alias":"image"},"@apostrophecms/image-tag":{"name":"@apostrophecms/image-tag","label":"Image Tag","pluralLabel":"Image Tags","action":"/api/v1/@apostrophecms/image-tag","schema":[{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"slug","type":"slug","label":"Slug","required":true,"following":"title","group":{"name":"utility"},"_id":"d73f1233ca14ae04eb01f6661de27eea"},{"name":"trash","type":"boolean","label":"Trash","contextual":true,"def":false,"group":{"name":"utility"},"_id":"dc499a0fefc4f1a4cc81587e35734484"}],"filters":[{"name":"visibility","label":"Visibility","inputType":"radio","choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"},{"value":null,"label":"Any"}],"allowedInChooser":false,"def":true},{"name":"trash","label":"Trash","inputType":"radio","choices":[{"value":false,"label":"Live"},{"value":true,"label":"Trash"}],"allowedInChooser":false,"def":false,"required":true}],"columns":[{"name":"title","label":"Title"},{"name":"updatedAt","label":"Edited on"},{"name":"visibility","label":"Visibility"}],"batchOperations":[{"name":"trash","label":"Trash","inputType":"radio","unlessFilter":{"trash":true}},{"name":"rescue","label":"Rescue","unlessFilter":{"trash":false}}],"quickCreate":false,"components":{"insertModal":"AposDocEditor","managerModal":"AposPiecesManager"}},"@apostrophecms/file":{"name":"@apostrophecms/file","label":"File","pluralLabel":"Files","action":"/api/v1/@apostrophecms/file","schema":[{"name":"attachment","type":"attachment","label":"File","required":true,"group":{"name":"basics","label":"Basics"},"_id":"9155b49041e8424f9368197709020e06","accept":".gif,.jpg,.png,.txt,.rtf,.pdf,.xls,.ppt,.doc,.pptx,.sldx,.ppsx,.potx,.xlsx,.xltx,.csv,.docx,.dotx,.jpeg"},{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"slug","type":"slug","label":"Slug","prefix":"file-","required":true,"following":"title","group":{"name":"basics","label":"Basics"},"_id":"a8e2937805da2eab992448b7dc494a62"},{"name":"_tags","type":"relationship","label":"Tags","withType":"@apostrophecms/file-tag","group":{"name":"basics","label":"Basics"},"idsStorage":"tagsIds","_id":"e3b69eb3bc337c38a951caf5bf306754"},{"name":"trash","type":"boolean","label":"Trash","contextual":true,"def":false,"group":{"name":"utility"},"_id":"dc499a0fefc4f1a4cc81587e35734484"},{"name":"description","type":"string","label":"Description","textarea":true,"group":{"name":"details","label":"Details"},"_id":"4661f859a1d38baa8f1839c580085614"},{"name":"credit","type":"string","label":"Credit","group":{"name":"details","label":"Details"},"_id":"26bf531fd175dcb22e9a31d9f99ac7f6"},{"name":"creditUrl","type":"url","label":"Credit URL","group":{"name":"details","label":"Details"},"_id":"e1393e987696a8f263ea607b3a60c708"},{"name":"visibility","type":"select","label":"Who can view this?","def":"public","required":true,"choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}],"group":{"name":"permissions","label":"Permissions","last":true},"_id":"97b78fe94e3742640944886e9a67f171"}],"filters":[{"name":"visibility","label":"Visibility","inputType":"radio","choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"},{"value":null,"label":"Any"}],"allowedInChooser":false,"def":true},{"name":"trash","label":"Trash","inputType":"radio","choices":[{"value":false,"label":"Live"},{"value":true,"label":"Trash"}],"allowedInChooser":false,"def":false,"required":true}],"columns":[{"name":"title","label":"Title"},{"name":"updatedAt","label":"Edited on"},{"name":"visibility","label":"Visibility"}],"batchOperations":[{"name":"trash","label":"Trash","inputType":"radio","unlessFilter":{"trash":true}},{"name":"rescue","label":"Rescue","unlessFilter":{"trash":false}},{"name":"visibility","label":"Visibility","requiredField":"visibility","fields":{"add":{"visibility":{"type":"select","label":"Who can view this?","def":"public","choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}]}}}}],"insertViaUpload":true,"quickCreate":false,"components":{"insertModal":"AposDocEditor","managerModal":"AposPiecesManager"},"alias":"file"},"@apostrophecms/file-tag":{"name":"@apostrophecms/file-tag","label":"File Tag","pluralLabel":"File Tags","action":"/api/v1/@apostrophecms/file-tag","schema":[{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"slug","type":"slug","label":"Slug","required":true,"following":"title","group":{"name":"utility"},"_id":"d73f1233ca14ae04eb01f6661de27eea"},{"name":"trash","type":"boolean","label":"Trash","contextual":true,"def":false,"group":{"name":"utility"},"_id":"dc499a0fefc4f1a4cc81587e35734484"}],"filters":[{"name":"visibility","label":"Visibility","inputType":"radio","choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"},{"value":null,"label":"Any"}],"allowedInChooser":false,"def":true},{"name":"trash","label":"Trash","inputType":"radio","choices":[{"value":false,"label":"Live"},{"value":true,"label":"Trash"}],"allowedInChooser":false,"def":false,"required":true}],"columns":[{"name":"title","label":"Title"},{"name":"updatedAt","label":"Edited on"},{"name":"visibility","label":"Visibility"}],"batchOperations":[{"name":"trash","label":"Trash","inputType":"radio","unlessFilter":{"trash":true}},{"name":"rescue","label":"Rescue","unlessFilter":{"trash":false}}],"quickCreate":false,"components":{"insertModal":"AposDocEditor","managerModal":"AposPiecesManager"}},"@apostrophecms/busy":{"busy":false,"components":{"the":"TheAposBusy"},"alias":"busy"},"default-page":{"name":"default-page","label":"Default Page","action":"/api/v1/default-page","schema":[{"name":"title","type":"string","label":"Title","required":true,"sortify":true,"group":{"name":"basics","label":"Basics"},"_id":"f9deb4307b14ec0199642c67bc7849f2"},{"name":"main","type":"area","options":{"widgets":{"@apostrophecms/rich-text":{"toolbar":["styles","|","bold","italic","strike","link","|","bullet_list","ordered_list"],"styles":[{"tag":"p","label":"Paragraph (P)"},{"tag":"h3","label":"Heading 3 (H3)"},{"tag":"h4","label":"Heading 4 (H4)"}]},"@apostrophecms/image":{},"@apostrophecms/video":{}}},"group":{"name":"basics","label":"Basics"},"label":"Main","_id":"48bd41d0120a143082e962db5bd9ac25"},{"name":"slug","type":"slug","label":"Slug","required":true,"page":true,"following":"title","group":{"name":"utility"},"_id":"59ffb66aa916fb4541003ad46a49ab52"},{"name":"type","type":"select","label":"Type","required":true,"choices":[{"value":"default-page","label":"Default"},{"value":"@apostrophecms/home-page","label":"Home"}],"group":{"name":"utility"},"_id":"f30a526b60680a9fd84d2251f87a1ef6"},{"name":"orphan","type":"boolean","label":"Hide in Navigation","def":false,"group":{"name":"utility"},"_id":"88ef6252cb330cc8aa30c1dd6c9bd726"},{"name":"visibility","type":"select","label":"Who can view this?","def":"public","required":true,"choices":[{"value":"public","label":"Public"},{"value":"loginRequired","label":"Login Required"}],"group":{"name":"permissions","label":"Permissions","last":true},"_id":"97b78fe94e3742640944886e9a67f171"}]}},"prefix":"","csrfCookieName":"bestdrillmachine.csrf","htmlPageId":"ckiq0i07x004te8pnym3cpsjz","scene":"apos","user":{"title":"admin","_id":"ckiohue7i000abkpndz4gqjnv","username":"admin"}}'>
    

    
      
        <div id="apos-busy"></div>
        <div id="apos-admin-bar"></div>
      
    
    
      
        <div id="apos-context-menu"></div>
        <div id="apos-notification"></div>
      
    
    <div class="apos-refreshable" data-apos-refreshable>
      
      <a name="main"></a>
      

      
  

      

      

  <!-- javascript ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>



    </div>
    
<script src="/apos-frontend/apos-bundle.js"></script>

    
    <script data-apos-refresh-on-restart="/api/v1/@apostrophecms/asset/restart-id">
(function() {
  // Note: this script will not appear in the page in production.
  //
  // eslint-disable-next-line no-var
  var reloadId;
  // eslint-disable-next-line no-var
  var fast = '1';
  check();
  function check() {
    apos.http.get(document.querySelector('[data-apos-refresh-on-restart]').getAttribute('data-apos-refresh-on-restart'), {
      qs: {
        fast: fast
      }
    }, function(err, result) {
      if (err) {
        fast = '1';
        setTimeout(check, 1000);
        return;
      }
      fast = '';
      if (!reloadId) {
        reloadId = result;
      } else if (result !== reloadId) {
        console.log('Apostrophe restarted, refreshing the page');
        window.location.reload();
        return;
      }
      setTimeout(check, 1000);
    });
  }
})();
</script>
    

    
    
      <div id="apos-modals"></div>
    
  </body>
</html>

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 34 (19 by maintainers)

Most upvoted comments

From what I can tell by viewing the raw HTML, this is caused by the script loading and looking for the apos-modals, but it gets written to the DOM after the script.

I’ve discovered by digging around that this script/element ordering problem is definitely a long-known issue with Vue, for example this stackexchange issue dates from 7 years ago:

https://stackoverflow.com/questions/29484431/vue-warn-cannot-find-element

I read somewhere that it has also been dealt with by adding a defer attribute to the script element - but this may have undesirable connotations as the script will wait for the DOM to be fully loaded before executing.

LeviticusMaximus on Aug 4, 2022

Hi, I’m also having this issue.

I’m brand new to apostrophe, so I haven’t done anything besides install and then npm run dev. I don’t even know how to do anything, which might cause this error.

From what I can tell by viewing the raw HTML, this is caused by the script loading and looking for the apos-modals, but it gets written to the DOM after the script, like below.

<script src="/apos-frontend/default/apos-module-bundle.js"></script> <div id="apos-modals"></div>

I tried to look for where this is written, so I could rearrange the order, but I had no success.

colecmc on Aug 4, 2022

Please open a new ticket if you’d like to continue this discussion — which is great but I don’t want to lose focus on the original ticket.

On Fri, Dec 18, 2020 at 9:06 AM Hussain notifications@github.com wrote:

@boutell https://github.com/boutell, not really sure if nesting the elements n levels deep would solve the issue, the external third-party CSS might target elements by tags and still manage to apply styles to elements nested to any level deep … for ex: input { height: 50px} Now I understand that’s bad styling but still its possible and probably bootstrap(at least the older versions) seems to be doing it.

I was last trying to modify one of your components and try to add some reset styling like * {all: unset;} but was not able to make it work, due to lack of understand of apostrophe…

I also remember vaguely that polymerjs web components run isolated from other components, css don’t affect each other, in case knowing that would be helpful. thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe/issues/2630#issuecomment-748101814, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27OZ75F2IAPAUXKFO3DSVNOWDANCNFSM4U4LCJQA .

–

THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

boutell on Dec 18, 2020

I do acknowledge that the included bootstrap CSS is outdated, but I think that the admin UI should be almost immune to any third party css, outdated or not.

I’m not sure I totally agree with this. We should do what we can to make it resistant to style conflicts and we should (and will) document front end code guidance, but there might be reasonable CSS or JS coding practices devs should avoid.

abea on Dec 16, 2020

OK yes, CSS conflicts with the admin UI are a known issue for us that we are looking into. It sounds like the javascript error probably wasn’t related to your use of jQuery since @abea believes he’s seen it elsewhere.

On Wed, Dec 16, 2020 at 10:39 AM Hussain notifications@github.com wrote:

hi @boutell https://github.com/boutell ,

I thought that the above issue I reported is happening because of me adding jQuery to the page, but based on @abea https://github.com/abea 's response, I might be wrong about it.

But yes, I have noticed the apostrophe core UI change when external CSS are included using the <link> tags in layout.html. Based on the CSS included, sometimes the effects are too severe making the UI unusable.

A quick example below:

Follow the procedure of creating a project using apostrophe 3 boilerplate:

git clone https://github.com/apostrophecms/a3-boilerplate myproject cd myproject npm install node app @apostrophecms/user:add admin

Open the views\layout.html and add the below CSS link in the {% block extraHead %}{% endblock %} section.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" integrity="sha512-dhpxh4AzF050JM736FF+lLVybu28koEYRrSJtTKfA4Z7jKXJNQ5LcxKmHEwruFN2DuOAi9xeKROJ4Z+sttMjqw==" crossorigin="anonymous" />
I do acknowledge that the included bootstrap CSS is outdated, but I think that the admin UI should be almost immune to any third party css, outdated or not.

run npm run dev and visit the site at http://localhost:3000 and login as admin.

View the side effects of the bootstrap css being applied on the apos-context-menu dropdown as shown in below images:

[image: image] https://user-images.githubusercontent.com/4962633/102369174-ab5b2200-3fe1-11eb-8f10-475d7241d3b5.png

[image: image] https://user-images.githubusercontent.com/4962633/102369197-b0b86c80-3fe1-11eb-8592-8ea4c151faa1.png

[image: image] https://user-images.githubusercontent.com/4962633/102369376-dd6c8400-3fe1-11eb-8ec6-bc56d6b99bc9.png

[image: image] https://user-images.githubusercontent.com/4962633/102369480-ff660680-3fe1-11eb-85cc-f96c1e5107ba.png

[image: image] https://user-images.githubusercontent.com/4962633/102369623-29b7c400-3fe2-11eb-9596-08ac12898e93.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe/issues/2630#issuecomment-746494352, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27N5M2EKDOBNRS2JMW3SVDIDXANCNFSM4U4LCJQA .

–

THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

boutell on Dec 16, 2020