DOM7 In External Files

Questions
1

Hi, I’ve tried splitting out my files into more manageable sections, and am having some issues when trying to access DOM7 within an external js file.

I had been using it the “normal” way by having it all in the one .f7.html file, but when trying to split them out for management purposes it causes many issues.

I import the js by doing:
<script src="static/js/admin/home.js" type="module"></script>

here is my code on the “home.js”

// Reveal bottom navigation bar
import $ from 'dom7';

$(document).on('page:init', '.page[data-name="home"]', function (e) { 

  setTimeout(function(){ $('.toolbar').hide(); }, 1);

  $('.page-content').css("padding", "0");

});

export default () => {

  return $render;

}

I can’t seem to get DOM7 to hook no matter what I try.

The main error here is:
Uncaught TypeError: Failed to resolve module specifier "dom7". Relative references must start with either "/", "./", or "../".

Is this actually possible to do, or is this a limitation of the framework?

Thanks.

2

<script type="module"> is native JS module, it won’t work like that. You need to keep component script in f7.html file, if you need to separate some part from it, use imports in this file:

<script>
  import doSomething from './something.js';

  export default () => {
    doSomething();
    return $render;
  }
</script>
1 Like