ionic-team
bug: (external) angular domino returns undefined instead of null for querySelector
Prerequisites
- [X] I have read the Contributing Guidelines.
- [X] I agree to follow the Code of Conduct.
- [X] I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v7.x
Current Behavior
I recently upgraded my Ionic application first from 5.x to 6.x and after that from 6.x to 7.x I followed all the upgrade steps, described on the website and everything seems to work as it should.
However, when loading the page I get a long error message in the developer console of Visual studio code.
The problem is, I dont have any helper slot in my code.
So far I didn't find any solution to the problem. I would expect to find at least something about the warning in the docs. `
[Ionic Warning]: The "helper" slot has been deprecated in favor of using the "helperText" property on ion-input or ion-textarea. <ref *4> HTMLUnknownElement {
parentNode: <ref *2> HTMLDivElement {
parentNode: <ref *1> HTMLUnknownElement {
parentNode: [HTMLUnknownElement],
_previousSibling: [Circular *1],
_nextSibling: [Circular *1],
_index: undefined,
_childNodes: [NodeList],
_firstChild: null,
nodeType: 1,
ownerDocument: [Object],
localName: 'ion-card',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'ION-CARD',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
__ngContext__: 444,
_listeners: [Object: null prototype],
_nid: 3034,
_classList: [DOMTokenList],
connectedCallback: [Function: h],
's-p': [],
's-rc': undefined,
componentOnReady: [Function: componentOnReady$1],
forceUpdate: [Function: forceUpdate],
shadowRoot: [Circular *1],
color: [Getter/Setter],
button: [Getter/Setter],
type: [Getter/Setter],
disabled: [Getter/Setter],
download: [Getter/Setter],
href: [Getter/Setter],
rel: [Getter/Setter],
routerDirection: [Getter/Setter],
routerAnimation: [Getter/Setter],
target: [Getter/Setter],
_lastModTime: 828,
_children: [Object],
's-cr': [Object],
's-sc': 'sc-ion-card-md',
's-en': ''
},
_previousSibling: <ref *3> HTMLUnknownElement {
parentNode: [HTMLUnknownElement],
_previousSibling: [Object],
_nextSibling: [Circular *2],
_index: 5,
_childNodes: [NodeList],
_firstChild: null,
nodeType: 1,
ownerDocument: [Object],
localName: 'ion-fab',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'ION-FAB',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
__ngContext__: 444,
_listeners: [Object: null prototype],
_nid: 3269,
connectedCallback: [Function: h],
's-p': [],
's-rc': undefined,
componentOnReady: [Function: componentOnReady$1],
forceUpdate: [Function: forceUpdate],
shadowRoot: [Circular *3],
horizontal: [Getter/Setter],
vertical: [Getter/Setter],
edge: [Getter/Setter],
activated: [Getter/Setter],
_lastModTime: 827,
_children: [Object],
's-cr': [Object],
's-sn': '',
's-ol': [Object],
's-hn': 'ION-CARD',
's-sc': 'sc-ion-fab',
_classList: [DOMTokenList],
's-en': ''
},
_nextSibling: {
parentNode: [HTMLUnknownElement],
_previousSibling: [Circular *2],
_nextSibling: [Object],
_index: 0,
nodeType: 8,
ownerDocument: [Object],
_data: '',
's-cn': true,
_nid: 3035
},
_index: 6,
_childNodes: NodeList(2) [ [Circular *4], [HTMLUnknownElement] ],
_firstChild: null,
nodeType: 1,
ownerDocument: <ref *5> {
parentNode: null,
_previousSibling: [Circular *5],
_nextSibling: [Circular *5],
_index: undefined,
_childNodes: null,
_firstChild: [Object],
nodeType: 9,
isHTML: true,
_address: 'http://localhost:58476/',
readyState: 'loading',
implementation: [Object],
ownerDocument: null,
_contentType: 'text/html',
doctype: [Object],
documentElement: [HTMLHtmlElement],
_templateDocCache: null,
_nodeIterators: null,
_nid: 1,
_nextnid: 3659,
_nodes: [Array],
byId: [Object: null prototype],
modclock: 828,
_scripting_enabled: true,
defaultView: [Object],
_lastModTime: 1,
_listeners: [Object: null prototype],
createElement: [Function: t],
createElementNS: [Function: t]
},
localName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'DIV',
_attrsByQName: [Object: null prototype] {
'_ngcontent-sc108': [Object],
class: [Object]
},
_attrsByLName: [Object: null prototype] {
'|_ngcontent-sc108': [Object],
'|class': [Object]
},
_attrKeys: [ '|_ngcontent-sc108', '|class' ],
__ngContext__: 444,
_nid: 3240,
_lastModTime: 828,
_children: {
'0': [Circular *4],
'1': [HTMLUnknownElement],
element: [Circular *2],
lastModTime: 175,
childrenByNumber: [Array],
childrenByName: [Object: null prototype] {}
},
's-sn': '',
's-ol': {
parentNode: [HTMLUnknownElement],
_previousSibling: [Object],
_nextSibling: [Object],
_index: 3,
nodeType: 8,
ownerDocument: [Object],
_data: 'org-location for <div> (host=undefined)',
's-nr': [Circular *2],
_nid: 3237
},
's-hn': 'ION-CARD'
},
_previousSibling: <ref *6> HTMLUnknownElement {
parentNode: <ref *2> HTMLDivElement {
parentNode: [HTMLUnknownElement],
_previousSibling: [HTMLUnknownElement],
_nextSibling: [Object],
_index: 6,
_childNodes: [NodeList],
_firstChild: null,
nodeType: 1,
ownerDocument: [Object],
localName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'DIV',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
__ngContext__: 444,
_nid: 3240,
_lastModTime: 828,
_children: [Object],
's-sn': '',
's-ol': [Object],
's-hn': 'ION-CARD'
},
_previousSibling: [Circular *4],
_nextSibling: [Circular *4],
_index: undefined,
_childNodes: NodeList(6) [
[Object],
[Object],
[Object],
[Object],
[HTMLDivElement],
[HTMLDivElement]
],
_firstChild: null,
nodeType: 1,
ownerDocument: <ref *5> {
parentNode: null,
_previousSibling: [Circular *5],
_nextSibling: [Circular *5],
_index: undefined,
_childNodes: null,
_firstChild: [Object],
nodeType: 9,
isHTML: true,
_address: 'http://localhost:58476/',
readyState: 'loading',
implementation: [Object],
ownerDocument: null,
_contentType: 'text/html',
doctype: [Object],
documentElement: [HTMLHtmlElement],
_templateDocCache: null,
_nodeIterators: null,
_nid: 1,
_nextnid: 3659,
_nodes: [Array],
byId: [Object: null prototype],
modclock: 828,
_scripting_enabled: true,
defaultView: [Object],
_lastModTime: 1,
_listeners: [Object: null prototype],
createElement: [Function: t],
createElementNS: [Function: t]
},
localName: 'ion-item',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'ION-ITEM',
_attrsByQName: [Object: null prototype] {
'_ngcontent-sc108': [Object],
lines: [Object],
class: [Object],
's-mode': [Object]
},
_attrsByLName: [Object: null prototype] {
'|_ngcontent-sc108': [Object],
'|lines': [Object],
'|class': [Object],
'|s-mode': [Object]
},
_attrKeys: [ '|_ngcontent-sc108', '|lines', '|class', '|s-mode' ],
__ngContext__: 444,
_nid: 3249,
connectedCallback: [Function: h],
's-p': [],
's-rc': undefined,
_listeners: [Object: null prototype] {
ionInput: [Array],
ionColor: [Array],
ionStyle: [Array]
},
componentOnReady: [Function: componentOnReady$1],
forceUpdate: [Function: forceUpdate],
shadowRoot: [Circular *6],
color: [Getter/Setter],
button: [Getter/Setter],
detail: [Getter/Setter],
detailIcon: [Getter/Setter],
disabled: [Getter/Setter],
download: [Getter/Setter],
fill: [Getter/Setter],
shape: [Getter/Setter],
href: [Getter/Setter],
rel: [Getter/Setter],
lines: [Getter/Setter],
counter: [Getter/Setter],
routerAnimation: [Getter/Setter],
routerDirection: [Getter/Setter],
target: [Getter/Setter],
type: [Getter/Setter],
counterFormatter: [Getter/Setter],
_lastModTime: 740,
_children: {
'0': [HTMLDivElement],
'1': [HTMLDivElement],
'2': undefined,
element: [Circular *6],
lastModTime: 740,
childrenByNumber: [Array],
childrenByName: [Object: null prototype] {}
},
's-cr': {
parentNode: [Circular *6],
_previousSibling: [HTMLDivElement],
_nextSibling: [Object],
_index: 0,
nodeType: 8,
ownerDocument: [Object],
_data: '',
's-cn': true,
_nid: 3250
},
_classList: DOMTokenList {
'0': 'card-info',
'1': 'item-has-start-slot',
'2': 'sc-ion-item-md-h',
'3': 'item',
'4': 'md',
'5': 'item-lines-none',
'6': 'item-fill-none',
'7': 'ion-focusable',
'8': 'hydrated',
_getString: [Function (anonymous)],
_setString: [Function (anonymous)],
_length: 9,
_lastStringValue: 'card-info item-has-start-slot sc-ion-item-md-h item md item-lines-none item-fill-none ion-focusable hydrated'
},
's-sc': 'sc-ion-item-md',
's-en': ''
},
_nextSibling: <ref *6> HTMLUnknownElement {
parentNode: <ref *2> HTMLDivElement {
parentNode: [HTMLUnknownElement],
_previousSibling: [HTMLUnknownElement],
_nextSibling: [Object],
_index: 6,
_childNodes: [NodeList],
_firstChild: null,
nodeType: 1,
ownerDocument: [Object],
localName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'DIV',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
__ngContext__: 444,
_nid: 3240,
_lastModTime: 828,
_children: [Object],
's-sn': '',
's-ol': [Object],
's-hn': 'ION-CARD'
},
_previousSibling: [Circular *4],
_nextSibling: [Circular *4],
_index: undefined,
_childNodes: NodeList(6) [
[Object],
[Object],
[Object],
[Object],
[HTMLDivElement],
[HTMLDivElement]
],
_firstChild: null,
nodeType: 1,
ownerDocument: <ref *5> {
parentNode: null,
_previousSibling: [Circular *5],
_nextSibling: [Circular *5],
_index: undefined,
_childNodes: null,
_firstChild: [Object],
nodeType: 9,
isHTML: true,
_address: 'http://localhost:58476/',
readyState: 'loading',
implementation: [Object],
ownerDocument: null,
_contentType: 'text/html',
doctype: [Object],
documentElement: [HTMLHtmlElement],
_templateDocCache: null,
_nodeIterators: null,
_nid: 1,
_nextnid: 3659,
_nodes: [Array],
byId: [Object: null prototype],
modclock: 828,
_scripting_enabled: true,
defaultView: [Object],
_lastModTime: 1,
_listeners: [Object: null prototype],
createElement: [Function: t],
createElementNS: [Function: t]
},
localName: 'ion-item',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'ION-ITEM',
_attrsByQName: [Object: null prototype] {
'_ngcontent-sc108': [Object],
lines: [Object],
class: [Object],
's-mode': [Object]
},
_attrsByLName: [Object: null prototype] {
'|_ngcontent-sc108': [Object],
'|lines': [Object],
'|class': [Object],
'|s-mode': [Object]
},
_attrKeys: [ '|_ngcontent-sc108', '|lines', '|class', '|s-mode' ],
__ngContext__: 444,
_nid: 3249,
connectedCallback: [Function: h],
's-p': [],
's-rc': undefined,
_listeners: [Object: null prototype] {
ionInput: [Array],
ionColor: [Array],
ionStyle: [Array]
},
componentOnReady: [Function: componentOnReady$1],
forceUpdate: [Function: forceUpdate],
shadowRoot: [Circular *6],
color: [Getter/Setter],
button: [Getter/Setter],
detail: [Getter/Setter],
detailIcon: [Getter/Setter],
disabled: [Getter/Setter],
download: [Getter/Setter],
fill: [Getter/Setter],
shape: [Getter/Setter],
href: [Getter/Setter],
rel: [Getter/Setter],
lines: [Getter/Setter],
counter: [Getter/Setter],
routerAnimation: [Getter/Setter],
routerDirection: [Getter/Setter],
target: [Getter/Setter],
type: [Getter/Setter],
counterFormatter: [Getter/Setter],
_lastModTime: 740,
_children: {
'0': [HTMLDivElement],
'1': [HTMLDivElement],
'2': undefined,
element: [Circular *6],
lastModTime: 740,
childrenByNumber: [Array],
childrenByName: [Object: null prototype] {}
},
's-cr': {
parentNode: [Circular *6],
_previousSibling: [HTMLDivElement],
_nextSibling: [Object],
_index: 0,
nodeType: 8,
ownerDocument: [Object],
_data: '',
's-cn': true,
_nid: 3250
},
_classList: DOMTokenList {
'0': 'card-info',
'1': 'item-has-start-slot',
'2': 'sc-ion-item-md-h',
'3': 'item',
'4': 'md',
'5': 'item-lines-none',
'6': 'item-fill-none',
'7': 'ion-focusable',
'8': 'hydrated',
_getString: [Function (anonymous)],
_setString: [Function (anonymous)],
_length: 9,
_lastStringValue: 'card-info item-has-start-slot sc-ion-item-md-h item md item-lines-none item-fill-none ion-focusable hydrated'
},
's-sc': 'sc-ion-item-md',
's-en': ''
},
_index: undefined,
_childNodes: NodeList(4) [
{
parentNode: [Circular *4],
_previousSibling: [HTMLDivElement],
_nextSibling: [Object],
_index: 0,
nodeType: 8,
ownerDocument: [Object],
_data: '',
's-cn': true,
_nid: 3242
},
{
parentNode: [Circular *4],
_previousSibling: [Object],
_nextSibling: [HTMLDivElement],
_index: 1,
nodeType: 8,
ownerDocument: [Object],
_data: 'org-location for <ion-label> (host=undefined)',
's-nr': [HTMLUnknownElement],
_nid: 3459
},
HTMLDivElement {
parentNode: [Circular *4],
_previousSibling: [Object],
_nextSibling: [HTMLDivElement],
_index: 3,
_childNodes: [NodeList],
_firstChild: null,
nodeType: 1,
ownerDocument: [Object],
localName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'DIV',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
_classList: [DOMTokenList],
's-si': 'sc-ion-item-md',
's-hn': 'ION-ITEM',
_nid: 3448,
_lastModTime: 828,
_children: [Object]
},
HTMLDivElement {
parentNode: [Circular *4],
_previousSibling: [HTMLDivElement],
_nextSibling: [Object],
_index: 4,
_childNodes: [NodeList],
_firstChild: null,
nodeType: 1,
ownerDocument: [Object],
localName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'DIV',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
_classList: [DOMTokenList],
's-si': 'sc-ion-item-md',
's-hn': 'ION-ITEM',
_nid: 3456,
_lastModTime: 729,
_children: [Object]
}
],
_firstChild: null,
nodeType: 1,
ownerDocument: <ref *5> {
parentNode: null,
_previousSibling: [Circular *5],
_nextSibling: [Circular *5],
_index: undefined,
_childNodes: null,
_firstChild: {
parentNode: [Circular *5],
_previousSibling: [HTMLHtmlElement],
_nextSibling: [HTMLHtmlElement],
_index: undefined,
nodeType: 10,
ownerDocument: [Circular *5],
name: 'html',
publicId: '',
systemId: '',
_nid: 2
},
nodeType: 9,
isHTML: true,
_address: 'http://localhost:58476/',
readyState: 'loading',
implementation: { contextObject: [Circular *5] },
ownerDocument: null,
_contentType: 'text/html',
doctype: {
parentNode: [Circular *5],
_previousSibling: [HTMLHtmlElement],
_nextSibling: [HTMLHtmlElement],
_index: undefined,
nodeType: 10,
ownerDocument: [Circular *5],
name: 'html',
publicId: '',
systemId: '',
_nid: 2
},
documentElement: HTMLHtmlElement {
parentNode: [Circular *5],
_previousSibling: [Object],
_nextSibling: [Object],
_index: undefined,
_childNodes: null,
_firstChild: [HTMLHeadElement],
nodeType: 1,
ownerDocument: [Circular *5],
localName: 'html',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'HTML',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
_nid: 3,
_classList: [DOMTokenList]
},
_templateDocCache: null,
_nodeIterators: null,
_nid: 1,
_nextnid: 3659,
_nodes: [
null, [Circular *5], [Object],
[HTMLHtmlElement], [HTMLHeadElement], [HTMLLinkElement],
[Object], [HTMLMetaElement], [Object],
[HTMLTitleElement], undefined, [Object],
[HTMLBaseElement], [Object], [HTMLMetaElement],
[Object], [HTMLMetaElement], [Object],
[HTMLMetaElement], [Object], [HTMLMetaElement],
[Object], [HTMLLinkElement], [Object],
[HTMLStyleElement], [Object], [Object],
[HTMLLinkElement], [Object], [Object],
[Object], [HTMLMetaElement], [Object],
[HTMLMetaElement], [Object], [HTMLStyleElement],
[Object], [HTMLLinkElement], [Object],
[HTMLBodyElement], [Object], [HTMLUnknownElement],
[Object], [HTMLScriptElement], [HTMLScriptElement],
[HTMLScriptElement], [HTMLScriptElement], [Object],
[HTMLStyleElement], [Object], [HTMLUnknownElement],
[HTMLUnknownElement], [HTMLUnknownElement], [Object],
[Object], undefined, undefined,
undefined, undefined, undefined,
undefined, undefined, undefined,
undefined, undefined, undefined,
undefined, undefined, undefined,
undefined, undefined, undefined,
undefined, undefined, undefined,
undefined, undefined, undefined,
undefined, undefined, undefined,
undefined, undefined, undefined,
undefined, undefined, [HTMLUnknownElement],
[HTMLStyleElement], [Object], [HTMLStyleElement],
[Object], undefined, undefined,
undefined, undefined, undefined,
undefined, [Object], [HTMLMetaElement],
[HTMLMetaElement],
... 3559 more items
],
byId: [Object: null prototype] {
main: [HTMLUnknownElement],
_id: [HTMLInputElement],
'serverApp-state': [HTMLScriptElement],
'background-content': [MultiId],
'ion-sel-0-lbl': [HTMLLabelElement],
'ion-sel-0': [HTMLButtonElement],
'ion-selopt-0': [HTMLUnknownElement],
'ion-selopt-1': [HTMLUnknownElement],
'ion-selopt-2': [HTMLUnknownElement],
'ion-selopt-3': [HTMLUnknownElement],
'ion-selopt-4': [HTMLUnknownElement],
'ion-selopt-5': [HTMLUnknownElement],
'ion-selopt-6': [HTMLUnknownElement],
'ion-selopt-7': [HTMLUnknownElement],
'ion-selopt-8': [HTMLUnknownElement],
'ion-selopt-9': [HTMLUnknownElement]
},
modclock: 828,
_scripting_enabled: true,
defaultView: {
document: [Circular *5],
location: [Location],
_listeners: [Object: null prototype],
alert: [Function: bound alert],
blur: [Function: bound blur],
cancelAnimationFrame: [Function: bound cancelAnimationFrame],
cancelIdleCallback: [Function: bound cancelIdleCallback],
close: [Function: bound close],
confirm: [Function: bound confirm],
focus: [Function: bound focus],
matchMedia: [Function: bound matchMedia],
open: [Function: bound open],
prompt: [Function: bound prompt],
requestAnimationFrame: [Function: bound requestAnimationFrame],
requestIdleCallback: [Function: bound requestIdleCallback],
URL: [Function: bound URL],
customElements: null,
__allowInterval: false,
__maxTimeout: 0,
fetch: [Function (anonymous)],
FetchError: [class FetchError],
Headers: [class Headers],
Request: [class Request],
Response: [class Response],
Ionic: [Object]
},
_lastModTime: 1,
_listeners: [Object: null prototype] {
pause: [Array],
resume: [Array],
ionBackButton: [Array],
keydown: [Array]
},
createElement: [Function: t],
createElementNS: [Function: t]
},
localName: 'ion-item',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'ION-ITEM',
_attrsByQName: [Object: null prototype] {
'_ngcontent-sc108': {
localName: '_ngcontent-sc108',
prefix: null,
namespaceURI: null,
data: '',
_ownerElement: [Circular *4],
onchange: undefined
},
lines: {
localName: 'lines',
prefix: null,
namespaceURI: null,
data: 'none',
_ownerElement: [Circular *4],
onchange: undefined
},
class: {
localName: 'class',
prefix: null,
namespaceURI: null,
data: 'location item-has-start-slot sc-ion-item-md-h item md item-lines-none item-fill-none ion-focusable hydrated',
_ownerElement: [Circular *4],
onchange: [Function (anonymous)]
},
's-mode': {
localName: 's-mode',
prefix: null,
namespaceURI: null,
data: 'md',
_ownerElement: [Circular *4],
onchange: undefined
}
},
_attrsByLName: [Object: null prototype] {
'|_ngcontent-sc108': {
localName: '_ngcontent-sc108',
prefix: null,
namespaceURI: null,
data: '',
_ownerElement: [Circular *4],
onchange: undefined
},
'|lines': {
localName: 'lines',
prefix: null,
namespaceURI: null,
data: 'none',
_ownerElement: [Circular *4],
onchange: undefined
},
'|class': {
localName: 'class',
prefix: null,
namespaceURI: null,
data: 'location item-has-start-slot sc-ion-item-md-h item md item-lines-none item-fill-none ion-focusable hydrated',
_ownerElement: [Circular *4],
onchange: [Function (anonymous)]
},
'|s-mode': {
localName: 's-mode',
prefix: null,
namespaceURI: null,
data: 'md',
_ownerElement: [Circular *4],
onchange: undefined
}
},
_attrKeys: [ '|_ngcontent-sc108', '|lines', '|class', '|s-mode' ],
__ngContext__: 444,
_nid: 3241,
connectedCallback: [Function: h],
's-p': [],
's-rc': undefined,
_listeners: [Object: null prototype] {
ionInput: [ [Object] ],
ionColor: [ [Object] ],
ionStyle: [ [Object] ]
},
componentOnReady: [Function: componentOnReady$1],
forceUpdate: [Function: forceUpdate],
shadowRoot: [Circular *4],
color: [Getter/Setter],
button: [Getter/Setter],
detail: [Getter/Setter],
detailIcon: [Getter/Setter],
disabled: [Getter/Setter],
download: [Getter/Setter],
fill: [Getter/Setter],
shape: [Getter/Setter],
href: [Getter/Setter],
rel: [Getter/Setter],
lines: [Getter/Setter],
counter: [Getter/Setter],
routerAnimation: [Getter/Setter],
routerDirection: [Getter/Setter],
target: [Getter/Setter],
type: [Getter/Setter],
counterFormatter: [Getter/Setter],
_lastModTime: 828,
_children: {
'0': HTMLDivElement {
parentNode: [Circular *4],
_previousSibling: [Object],
_nextSibling: [HTMLDivElement],
_index: 3,
_childNodes: [NodeList],
_firstChild: null,
nodeType: 1,
ownerDocument: [Object],
localName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'DIV',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
_classList: [DOMTokenList],
's-si': 'sc-ion-item-md',
's-hn': 'ION-ITEM',
_nid: 3448,
_lastModTime: 828,
_children: [Object]
},
'1': HTMLDivElement {
parentNode: [Circular *4],
_previousSibling: [HTMLDivElement],
_nextSibling: [Object],
_index: 4,
_childNodes: [NodeList],
_firstChild: null,
nodeType: 1,
ownerDocument: [Object],
localName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'DIV',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
_classList: [DOMTokenList],
's-si': 'sc-ion-item-md',
's-hn': 'ION-ITEM',
_nid: 3456,
_lastModTime: 729,
_children: [Object]
},
element: [Circular *4],
lastModTime: 729,
childrenByNumber: [ [HTMLDivElement], [HTMLDivElement] ],
childrenByName: [Object: null prototype] {}
},
's-cr': <ref *7> {
parentNode: [Circular *4],
_previousSibling: HTMLDivElement {
parentNode: [Circular *4],
_previousSibling: [HTMLDivElement],
_nextSibling: [Circular *7],
_index: 4,
_childNodes: [NodeList],
_firstChild: null,
nodeType: 1,
ownerDocument: [Object],
localName: 'div',
namespaceURI: 'http://www.w3.org/1999/xhtml',
prefix: null,
_tagName: 'DIV',
_attrsByQName: [Object: null prototype],
_attrsByLName: [Object: null prototype],
_attrKeys: [Array],
_classList: [DOMTokenList],
's-si': 'sc-ion-item-md',
's-hn': 'ION-ITEM',
_nid: 3456,
_lastModTime: 729,
_children: [Object]
},
_nextSibling: {
parentNode: [Circular *4],
_previousSibling: [Circular *7],
_nextSibling: [HTMLDivElement],
_index: 1,
nodeType: 8,
ownerDocument: [Object],
_data: 'org-location for <ion-label> (host=undefined)',
's-nr': [HTMLUnknownElement],
_nid: 3459
},
_index: 0,
nodeType: 8,
ownerDocument: <ref *5> {
parentNode: null,
_previousSibling: [Circular *5],
_nextSibling: [Circular *5],
_index: undefined,
_childNodes: null,
_firstChild: [Object],
nodeType: 9,
isHTML: true,
_address: 'http://localhost:58476/',
readyState: 'loading',
implementation: [Object],
ownerDocument: null,
_contentType: 'text/html',
doctype: [Object],
documentElement: [HTMLHtmlElement],
_templateDocCache: null,
_nodeIterators: null,
_nid: 1,
_nextnid: 3659,
_nodes: [Array],
byId: [Object: null prototype],
modclock: 828,
_scripting_enabled: true,
defaultView: [Object],
_lastModTime: 1,
_listeners: [Object: null prototype],
createElement: [Function: t],
createElementNS: [Function: t]
},
_data: '',
's-cn': true,
_nid: 3242
},
_classList: DOMTokenList {
'0': 'location',
'1': 'item-has-start-slot',
'2': 'sc-ion-item-md-h',
'3': 'item',
'4': 'md',
'5': 'item-lines-none',
'6': 'item-fill-none',
'7': 'ion-focusable',
'8': 'hydrated',
_getString: [Function (anonymous)],
_setString: [Function (anonymous)],
_length: 9,
_lastStringValue: 'location item-has-start-slot sc-ion-item-md-h item md item-lines-none item-fill-none ion-focusable hydrated'
},
's-sc': 'sc-ion-item-md',
's-en': ''
}
`
Expected Behavior
No error/warning messages in the console.
Steps to Reproduce
I am running a server side rendered version:
"serve:ssr": "node dist/app/server/main.js",
Code Reproduction URL
No response
Ionic Info
`
ionic info
[WARN] Error loading @ionic/angular package.json: Error
[ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package' is not
defined by "exports" in
E:\xxxxxxx\node_modules\@ionic\angular\package.json
Ionic:
Ionic CLI : 6.12.3 (C:\Users\alex\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 15.2.8
@angular-devkit/schematics : 15.2.8
@angular/cli : 15.2.8
@ionic/angular-toolkit : 9.0.0
Capacitor:
Capacitor CLI : 2.4.5
@capacitor/core : 2.4.5
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v16.18.0 (C:\Program Files\nodejs\node.exe)
npm : 6.11.3
OS : Windows 10
`
Angular: ng version `
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1502.8
@angular-devkit/build-angular 15.2.8
@angular-devkit/core 15.2.8
@angular-devkit/schematics 15.2.8
@angular/cli 15.2.8
@nguniversal/builders 15.2.1
@nguniversal/express-engine 15.2.1
@schematics/angular 15.2.8
rxjs 7.5.0
typescript 4.9.5
`
package json: `
"@angular/animations": "15.2.9",
"@angular/common": "^15.2.9",
"@angular/core": "^15.2.9",
"@angular/forms": "^15.2.9",
"@angular/platform-browser": "^15.2.9",
"@angular/platform-browser-dynamic": "^15.2.9",
"@angular/platform-server": "15.2.9",
"@angular/router": "^15.2.9",
"@capacitor/core": "2.4.5",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "7.0.7",
"@nguniversal/express-engine": "15.2.1",
"@ionic/angular-server": "7.0.7",
"@ionic/angular-toolkit": "9.0.0",
"@nguniversal/builders": "15.2.1",
`
Additional Information
No response
From what I learned so far, the ion-label implementation for ion-input, ion-select and so on has changed in the recent versions. Didn't find that in the migration guides so far. I fixed all of the ion-label problems, but the error message is still there.
Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.
Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
![ionitron-bot[bot] avatar](https://avatars.githubusercontent.com/in/8640?v=4 "Published by a pub.dev verified publisher"){kind=small}
@liamdebeasi From what I see in the source code, the helper and error slots are only inside commented out, generated code of my menu items. See last 3 lines. Example:
<ion-menu-toggle
_ngcontent-sc138=""
class="sc-ion-menu-toggle-h md menu-toggle-hidden sc-ion-menu-toggle-s hydrated"
aria-hidden="true"
><!----><!--org-location for <ion-item> (host=undefined)--><!--<slot> (host=ion-menu-toggle)--><ion-item
_ngcontent-sc138=""
menuclose=""
tabindex="0"
class="item-has-start-slot sc-ion-item-md-h item md item-lines-default item-fill-none in-list ion-activatable ion-focusable hydrated"
s-mode="md"
role="listitem"
><!----><!--org-location for <ion-icon> (host=undefined)--><!--org-location for <ion-label> (host=undefined)--><a
href="/"
class="item-native sc-ion-item-md sc-ion-item-md-s"
part="native"
><!--<slot name="start"> (host=ion-item)--><ion-icon
_ngcontent-sc138=""
slot="start"
name="home-outline"
class="sc-ion-icon-h md hydrated"
role="img"
><!---->
<div class="icon-inner sc-ion-icon"></div
></ion-icon>
<div class="item-inner sc-ion-item-md sc-ion-item-md-s">
<div class="input-wrapper sc-ion-item-md sc-ion-item-md-s">
<!--<slot> (host=ion-item)--><ion-label
_ngcontent-sc138=""
s-mode="md"
class="sc-ion-label-md-h sc-ion-label-md-s md hydrated"
><!---->
Home
</ion-label>
</div>
<!--<slot name="end"> (host=ion-item)-->
<div class="item-inner-highlight sc-ion-item-md"></div>
</div>
<ion-ripple-effect
class="sc-ion-item-md sc-ion-ripple-effect-h md hydrated"
role="presentation"
><!----></ion-ripple-effect
>
<div class="item-highlight sc-ion-item-md"></div
></a>
<div class="item-bottom sc-ion-item-md sc-ion-item-md-s">
<!--<slot name="error"> (host=ion-item)--><!--<slot name="helper"> (host=ion-item)-->
</div></ion-item
></ion-menu-toggle
>
Original code that generates the above code:
<ion-menu-toggle>
<ion-item
menuClose
[routerLink]="['']"
[queryParams]="{ l: languageParams }"
>
<ion-icon slot="start" name="home-outline"></ion-icon>
<ion-label>
{{ lang.home }}
</ion-label>
</ion-item>
</ion-menu-toggle>
Note, we use Server side rendering in our application.
Also how can i show multiple error texts?
I previously had:
<ion-item fill="outline" >
<ion-label position="stacked" color="warning">
<ion-icon slot="start" name="person"></ion-icon>
Enter Email
</ion-label>
<ion-input type="email" formControlName="email"></ion-input>
<ng-container *ngIf="getLoginControl['email'].touched">
<ion-note slot="error"
*ngIf="(getLoginControl['email'].errors && getLoginControl['email'].errors['required'])">
Email is required*
</ion-note>
<ion-note slot="error" *ngIf="(getLoginControl['email'].errors && getLoginControl['email'].invalid)">
Email is Invalid*
</ion-note>
</ng-container>
</ion-item>
Could you create a minimal reproduction app and post a link to it, such as a Github repo? Having a runnable example will help us determine the root cause of the issue. See the contributing guide for a how-to.
Could you create a minimal reproduction app and post a link to it, such as a Github repo? Having a runnable example will help us determine the root cause of the issue. See the contributing guide for a how-to.
@amandaejohnston I don't think this is possible, since you need to build server side code and run a node process. How is this possible with web sandboxes?
You'll want to create a Github repo rather than use Stackblitz or another web sandbox. Just make sure it only has the code necessary to reproduce the issue.
I have the same problem using SSR any ion-item inside ion-menu will print warning messages in the console
I have the same problem using SSR any ion-item inside ion-menu will print warning messages in the console
I replaced ion-item with ion-button but still the same result.
Hi everyone,
We need a runnable sample application otherwise we will be unable to resolve this issue. Please see https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction for how to create a code reproduction.
Hi everyone,
We need a runnable sample application otherwise we will be unable to resolve this issue. Please see https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction for how to create a code reproduction.
I did manage to get a working basic example with ssr. But I couldn't reproduce the error.
Need to copy more of the existing components.
What I found though is I had some old syntax in the <ion-col>, namely <ion-col col-12>
Nevertheless, the long, cryptic error (warning) message still persists.
I did check another time, the slot attribute I am only using with ion-icon and ion-buttons. Only start, end or icon-only.
Hi everyone,
We need a runnable sample application otherwise we will be unable to resolve this issue. Please see https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction for how to create a code reproduction.
@liamdebeasi so I analyzed my code more and I found this in the Chrome inspector:
Why are those slots generated?
The helper and error slots are deprecated, but are still included for backwards compatibility so developers have time to migrate to the new helperText and errorText properties on ion-input and ion-textarea.
@amandaejohnston Thank you for your reply. The web application is working slower because of those long warning messages in the development console. The application is stalling until those thousands of lines are printed to the console.
Assuming you still aren't using any helper or error slot code in your app, we will still need a runnable sample application that reproduces the issue. Otherwise, we will be unable to diagnose or resolve it.
Hi, Same issue here @amandaejohnston & @liamdebeasi I created a sample application to reproduce : https://github.com/mcornillon87/ionitem Just did :
create black app add ion-item npm install @angular/animations @ionic/angular-server ng add @nguniversal/express-engine add import { IonicServerModule } from '@ionic/angular-server'; to app/app.server.module.ts npm run dev:ssr You will see the long error in thje console
Assuming you still aren't using any
helperorerrorslot code in your app, we will still need a runnable sample application that reproduces the issue. Otherwise, we will be unable to diagnose or resolve it.
@amandaejohnston
here is the repo: https://github.com/aleksander351/ionic7-ssr-basic
"build:ssr": "ng build --configuration production", "serve:ssr": "node dist/app/server/main.js",
when you inspect the ion-item of the radio-button, you will find the same helper and error slot. Even though the long warning messages do not occur here. Maybe because of Angular 16 or who knows.
Not able to update my project to Angular 16 at the moment since some libraries don't support it.
Thank you for keeping it going.
Hey everyone,
Apologies for the delay. I tried both reproduction cases, but I was unable to reproduce the reported behavior. For both apps, I ran the following steps:
- Clone repo
- Run
npm install - Run
npm run build:ssr - Run
npm run serve:ssr - Open app in the browser.
I never received the reported warning both in my terminal or in my browser console. Can you please clarify the steps to reproduce?
@liamdebeasi FWIW, I was able to reproduce this using https://github.com/mcornillon87/ionitem; @mcornillon87's instructions were slightly different different from what you tried.
For that rep, you need to:
- Clone repo
- Run
npm install - Run
npm run dev:ssr - Open app in the browser.
If I run npm run build:ssr && npm run serve:ssr, I instead get the error Error: NotYetImplemented, which also shouldn't be happening… not sure if it's related. If not I can open another issue for that error.
If that still doesn't reproduce, maybe it's environment related? I'm running macOS 13.4.1 (c) and node v16.18.1.
Thanks @b-chowdr! I can reproduce this now. The problem here is that we check for the existence of elements with attributes such as slot="helper" inside ion-item. We do this using a querySelector: https://github.com/ionic-team/ionic-framework/blob/721fc6fd9a21c9c03bb21d290e9b1bbd703e43e3/core/src/components/item/item.tsx#L218
querySelector should return null if the element is not found, but in this case it is (incorrectly) returning undefined. Since we do a strict !== null check, the hasHelperSlot condition is true, and the warning logs. I will see if I can identify why this is returning undefined.
The root issue is with Domino, a library that Angular uses internally. Domino polyfills Element.querySelector in SSR. However, it incorrectly returns undefined instead of null when an element is not found. Since Ionic uses strict null checks, the deprecation warning is incorrectly being logged.
I filed an issue with the Angular team: https://github.com/angular/angular/issues/51068
I'm also getting this issue. I've +1 the angular ticket as July 23 was the last update ref: https://github.com/angular/domino/pull/16
@liamdebeasi is there a temporary workaround in the mean time to retract the console outputting thousands of lines?
fixed domino temporarily with patch-package localy. I don't believe it will ever be fixed for older versions of Angular anyways so I will close this.
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.