routing in canjs not working as links are not getting an href value

Question

I am new to canjs and following the tutorials on canjs site. I am using webpack to create a sample canjs page.

import { Component, stacheRouteHelpers } from "can";

Component.extend({
    tag: "my-app",
    view: `
        <a href="{{ routeUrl(page='home') }}">Home</a>
        <a href="{{ routeUrl(page='tasks') }}">Tasks</a>
    `,
    ViewModel: {
    }
});

When I see in the page, it's not routing to the home. Infact href value is not coming in output like below.

<a href="">Home</a>

console shows the following warning

MyAppView:3: Unable to find key "routeUrl()".

Answer 1

Like Justin mentioned, I think webpack is tree-shaking stacheRouteHelpers out of the build.

I think you can work around the issue by doing the following:

import { Component, stache, stacheRouteHelpers } from "can";

stache.addHelper(stacheRouteHelpers);