[Bug report]: Uncaught DOMException causing blank page to be displayed

Requirements before reporting

No duplicated issue reported.
I have read the contribution guidelines.
I have checked the lastest version if the bug exist there. See all avaliable packages at npmJS.com
I have made sure that the issue comes from SDDS packages by removing SDDS from my project as a test.
I have followed the installation guide.

Package

@scania/components

Package versions

@scania/components 1.15.0

Browser

Chrome

Framework

.NET

Version

.NET Framework 4.6

Reproduction steps

N/A

In some scenarios there is an exception thrown in @scania/components core.js when script tag for sdds-components.js is to be inserted in DOM. Possibly due to browser extensions adding script tags into the DOM.

See code example section.

Code example

Problem is most likely due to the fact that parentScript[0] on line 19 below - in some cases - contains a <script> tag that is not a child node of document.head.

Possible solution ?

On line 2, change:
const parentScript = doc.querySelectorAll('script');
to
const parentScript = doc.head.querySelectorAll('script');

sdds/components/src/helpers/core.js

Lines 1 to 20 in f0f373e

    
           (function (doc) { 
        
             const parentScript = doc.querySelectorAll('script'); 
        
             const arr = Array.prototype.slice.call(parentScript); 
        
             let scriptElm = 
        
               arr.filter((item) => item.src.indexOf('dist/sdds-components.js') > -1)[0] || 
        
               doc.scripts[doc.scripts.length - 1]; 
        
             const parts = scriptElm.src.split('/'); 
        
             parts.pop(); 
        
             parts.push('sdds-components'); 
        
             const url = parts.join('/'); 
        
             scriptElm = doc.createElement('script'); 
        
             // when stop supporting IE 11, change to /sdds-components.esm.js and type="module" 
        
             scriptElm.src = `${url}/sdds-components.js`; 
        
             scriptElm.nomodule = true; 
        
             fixFouc(); 
        
             doc.head.insertBefore(scriptElm, parentScript[0]); 
        
           })(document);

Screenshots

Page loaded but empty:

Users Chrome extensions (possibly causing the problem)

Expected behaviour

Page loaded without errors even when first <script> in DOM is not part of < head>

Console errors

core.js:20 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
at https://xxxx.yyyyy.com/node_modules/@scania/components/dist/core.js:20:12
at https://xxxx.yyyyy.com/node_modules/@scania/components/dist/core.js:21:3

Contact information

No response

Closing this, appears to cover the same issue as the newer #1019

	(function (doc) {
	const parentScript = doc.querySelectorAll('script');
	const arr = Array.prototype.slice.call(parentScript);
	let scriptElm =
	arr.filter((item) => item.src.indexOf('dist/sdds-components.js') > -1)[0] \|\|
	doc.scripts[doc.scripts.length - 1];

	const parts = scriptElm.src.split('/');
	parts.pop();
	parts.push('sdds-components');
	const url = parts.join('/');

	scriptElm = doc.createElement('script');
	// when stop supporting IE 11, change to /sdds-components.esm.js and type="module"
	scriptElm.src = `${url}/sdds-components.js`;
	scriptElm.nomodule = true;

	fixFouc();
	doc.head.insertBefore(scriptElm, parentScript[0]);
	})(document);