Can't import Blaze compiled HTML from relative path

help
1

In my templates folder I have one js file where I’m trying to import ./start_page.html, Meteor crashes and gives the following error: Cannot find module './start_page.html' even though the html file is in the same directory.

The code in the start_page.js only works if it’s in client/main.js. I’m thinking that the problem maybe is in the Routes.js code or client/main.js. I’ve tried importing the start_page.js in the other files to see if the error goes away but no luck.

start_page.html:

 <template name="start_page">
    <div class="row text-center">
        <div class="col-md-6">
         <button class="btn btn-primary btn-lg schedule">Test 1</button>
        </div>
        <div class="col-md-6">
            <button class="btn btn-primary btn-lg status">Test 2</button>
        </div>
    </div>
</template>

start_page.js:

import { Template } from 'meteor/templating';
import './start_page.html';
Template.start_page.events({
    'click .schedule'(event){
        alert("test");
    },
});

Router.js:

/// the start page

FlowRouter.route('/', {
    name: "index",
    action: function() {
    console.log('start page');
    BlazeLayout.render("mainLayout", {content: "start_page"});
    }
});


// for the / page
FlowRouter.route('/', {
    name: "index",
    action: function() {
    console.log('guest home route');
    BlazeLayout.render("mainLayout", {content: "guest_home"});
    }
});

My directory structure is currently like this:

client/
  main.css
  main.html
  main.js
  routes.js
server/
  main.js
shared/
 shared.js
templates/
  start_page.html
  start_page.js
  template.html
  template2.html
  template3.html