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()".

I think webpack is stacheRouteHelpers because it's not used directly in that file (the template doesn't count). Is there a way to tell webpack not to treeshake a module? — Justin Meyer, Apr 26 '19 at 19:13

score 0 · Answer 1 · answered Apr 27 '19 at 00:43

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);

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

1 Answers1