{"record":{"id":"037d4d7b6a3244d9","repo":"framework7io/framework7","slug":"framework7-can-t-create-a-view-instance-because","errorCode":null,"errorMessage":"Framework7: can't create a View instance because ${typeof el === 'string' ? `the selector \"${el}\" didn't match any element` : 'el must be an HTMLElement or Dom7 object'}","messagePattern":"Framework7: can't create a View instance because (.+?)\" didn't match any element` : 'el must be an HTMLElement or Dom7 object'\\}","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/core/components/view/view-class.js","lineNumber":29,"sourceCode":"    const view = this;\n\n    const ssr = view.params.routerId;\n\n    const defaults = {\n      routes: [],\n      routesAdd: [],\n    };\n\n    if (!ssr) {\n      const $el = $(el);\n      if (!$el.length) {\n        let message = \"Framework7: can't create a View instance because \";\n        message +=\n          typeof el === 'string'\n            ? `the selector \"${el}\" didn't match any element`\n            : 'el must be an HTMLElement or Dom7 object';\n\n        throw new Error(message);\n      }\n    }\n\n    // Default View params\n    view.params = extend({ el }, defaults, app.params.view, viewParams);\n\n    // Routes\n    if (view.params.routes.length > 0) {\n      view.routes = view.params.routes;\n    } else {\n      view.routes = [].concat(app.routes, view.params.routesAdd);\n    }\n\n    // View Props\n    extend(false, view, {\n      app,\n      name: view.params.name,\n      main: view.params.main,","sourceCodeStart":11,"sourceCodeEnd":47,"githubUrl":"https://github.com/framework7io/framework7/blob/655759126686766530a027b2f8f369c991d63d1c/src/core/components/view/view-class.js#L11-L47","documentation":"A View (router container) requires a real DOM element. The View constructor throws when `el` is a CSS selector that matched nothing, or when `el` is neither an HTMLElement nor a Dom7 object. Framework7 cannot mount navigation into a missing container.","triggerScenarios":"`app.views.create('#my-view')` where no element with that selector exists at call time; passing null/undefined or a jQuery object instead of Dom7/HTMLElement; creating the View before the DOM is rendered.","commonSituations":"Script executing before DOMContentLoaded; selector typo or renamed id; Views initialized in a page fragment not yet attached; migrating from jQuery where `$('#el')[0]` is needed.","solutions":["Ensure the element exists in the DOM before creating the View (wrap init in DOMContentLoaded or run after render)","Verify the selector string for typos and that the id/class matches exactly","Pass an HTMLElement (`document.querySelector('.view')`) or a Dom7 object (`$$('.view')`) instead of other wrappers","If the element is conditionally rendered, create the View after it is mounted"],"exampleFix":"// before\nconst mainView = app.views.create('#main-view'); // element not yet in DOM\n\n// after\ndocument.addEventListener('DOMContentLoaded', () => {\n  const el = document.querySelector('#main-view');\n  if (el) app.views.create(el);\n});","handlingStrategy":"validation","validationCode":"const el = typeof selector === 'string' ? document.querySelector(selector) : selector;\nif (!el) throw new Error(`View element not found: ${selector}`);\nconst view = app.views.create(el, viewParams);","typeGuard":"function isDomTarget(el) {\n  return el instanceof HTMLElement || (el && Array.isArray(el) && el[0] instanceof HTMLElement);\n}","tryCatchPattern":"try {\n  const view = app.views.create('#main-view');\n} catch (e) {\n  if (/didn't match any element|must be an HTMLElement/.test(e.message)) {\n    console.error('View target element missing; check selector and DOM timing');\n  } else throw e;\n}","preventionTips":["Initialize Views after DOMContentLoaded or after framework render","Log document.querySelector(selector) before creating to confirm it exists","Prefer passing the HTMLElement or Dom7 object over raw selectors","Keep selectors in one constants module to avoid typos"],"tags":["dom","view","selector","framework7"],"backgroundTag":"missing-dom-element","analyzedSha":"655759126686766530a027b2f8f369c991d63d1c","analyzedAt":"2026-09-02T19:48:40.711Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}