TypeError: scrollSpy is not a function

[kimnh-0823]

Hi @kimyvgy thanks for your work! jsDelivr seems to work properly now! :-)

Unfortunately there's a new problem since v2.5.3... if I import scrollSpy as usual:

import scrollSpy from 'simple-scrollspy';

scrollSpy(this.element, {...some options...})

there is a new error now:

TypeError: scrollSpy is not a function

I don't know how to solve this... tried to do something like new scrollSpy() but then it says

TypeError: scrollSpy is not a constructor

Any hint, what I might do wrong here? Thanks in advance!

Originally posted by @barbieswimcrew in #58 (comment)

[kimyvgy]

@barbieswimcrew How do you install this lib? Are you installing simple-scrollspy via jsDelivr?

If you are install simple-scrollspy as ESM module. The following script will work:

    <script type="module">
      import scrollSpy from "https://cdn.jsdelivr.net/npm/simple-scrollspy@latest/+esm";

      scrollSpy.default("#main-menu", { ... });
    </script>

[barbieswimcrew]

@kimyvgy The installing process is via the Symfony Asset Mapper (see docs) which downloads the file "simple-scrollspy.index.js" which looks like this:

/**
 * Bundled by jsDelivr using Rollup v2.79.1 and Terser v5.19.2.
 * Original file: /npm/simple-scrollspy@2.5.3/dist/index.js
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
var t={},e={};Object.defineProperty(e,"__esModule",{value:!0}),e.ScrollSpy=void 0;e.ScrollSpy=class{menuList;options;scroller;sections;activeItem=null;constructor(t,e={}){if(!t)throw new Error("Your navigation query selector is the first argument.");if("object"!=typeof e)throw new Error("The second argument must be an instance of an Object.");e.smoothScroll=!0===e.smoothScroll&&{}||e.smoothScroll,this.menuList=t instanceof HTMLElement?t:document.querySelector(t),this.options=Object.assign({},{sectionClass:".scrollspy",menuActiveTarget:"li > a",offset:0,hrefAttribute:"href",activeClass:"active",scrollContainer:"",smoothScroll:{}},e),this.options.scrollContainer?this.scroller=this.options.scrollContainer instanceof HTMLElement?this.options.scrollContainer:document.querySelector(this.options.scrollContainer):this.scroller=window,this.sections=document.querySelectorAll(this.options.sectionClass),this.attachEventListeners()}attachEventListeners(){if(this.scroller&&(this.scroller.addEventListener("scroll",(()=>this.onScroll())),this.options.smoothScroll&&this.menuList)){this.menuList.querySelectorAll(this.options.menuActiveTarget).forEach((t=>t.addEventListener("click",this.onClick.bind(this))))}}onClick(t){if(t.target){const e=t.target.getAttribute(this.options.hrefAttribute);if(e){const o=document.querySelector(e);o&&this.options.smoothScroll&&(t.preventDefault(),this.scrollTo(o))}}}onScroll(){const t=this.getSectionInView(),e=this.getMenuItemBySection(t);if(!t||!e)return;const o=e?.getAttribute(this.options.hrefAttribute),s=this.activeItem?.getAttribute(this.options.hrefAttribute);e&&o&&o!==s&&(this.removeCurrentActive({ignore:e}),this.setActive(e))}scrollTo(t){const e="function"==typeof this.options.smoothScrollBehavior&&this.options.smoothScrollBehavior;e?e(t,this.options.smoothScroll):t.scrollIntoView({...!0===this.options.smoothScroll?{}:this.options.smoothScroll,behavior:"smooth"})}getMenuItemBySection(t){if(!t||!this.menuList)return;const e=t.getAttribute("id");return this.menuList.querySelector(`[${this.options.hrefAttribute}="#${e}"]`)}getSectionInView(){for(let t=0;t<this.sections.length;t++){const e=this.sections[t].offsetTop,o=e+this.sections[t].offsetHeight;let s=(document.documentElement.scrollTop||document.body.scrollTop)+this.options.offset;if(this.options.scrollContainer&&this.scroller){s=(this.scroller instanceof Window?this.scroller.scrollY:this.scroller.scrollTop)+this.options.offset}if(s>e&&s<=o)return this.sections[t]}}setActive(t){this.activeItem=t;this.activeItem.classList.contains(this.options.activeClass)||(this.activeItem.classList.add(this.options.activeClass),"function"==typeof this.options.onActive&&this.options.onActive(this.activeItem))}removeCurrentActive({ignore:t}={}){if(this.activeItem)this.activeItem.classList.remove(this.options.activeClass),this.activeItem=null;else if(this.menuList){const{hrefAttribute:e,menuActiveTarget:o,activeClass:s}=this.options,i=t?`${o}.${s}:not([${e}="${t.getAttribute(e)}"])`:`${o}.${s}`;this.menuList.querySelectorAll(i).forEach((t=>t.classList.remove(this.options.activeClass)))}}},Object.defineProperty(t,"__esModule",{value:!0});const o=e;t.default=(t,e={})=>{const s=new o.ScrollSpy(t,e);return s.onScroll(),window.addEventListener("scroll",(()=>s.onScroll())),s};var s=t.__esModule;export{s as __esModule,t as default};

After installing I just use the import as described inside my stimulus controller

import scrollSpy from 'simple-scrollspy';

scrollSpy(this.element, {...some options...})